【未入力のテキストボックス】があった場合に【submitボタン】を jQueryを使って無効化するやり方

2013.5.22 jQuery 79b92a8d65613966f7d7aad9d05155fc.jpg

こんにちは!  いわだて (@dutchisover) です!

C812 moromiejyanaikaのコピー

サンプル

テキストボックスが3つあり、それら全てに文字が入力されていないと【submit要素(clickボタン)】が作動しません。どこの入力が足りていないか、を警告文で出すようにしています。

逆に全てのテキストボックスに文字が入力されていればクリックできるようになります。
また、【submit要素(clickボタン)】の文字色が黒くなり、ボタンの下の注意書き要素の線も色が付くようにしてみました。




  • 1行目のテキスト
  • 2行目のテキスト
  • 3行目のテキスト
  • が未入力です

サンプルコード

サンプルコード HTML

サンプルコード CSS

サンプルコード jQuery

解説します

HTMLやCSSの詳細は とくに特別なことはしていないので省きます。今回のキモ、submit要素を効かなくする】のは、jQueryのココです。

その前のテキストボックスイベントでフラグを立てています。

ここで【テキストボックス3つ全てに文字が入力されたら】submitボタンにclassを付与しています。(今回は【clear】というclassを付けています)

そして先述した【submitボタンのクリックイベント】で、【clearというclass】が付いているかどうか、でsubmitボタンを効かなくするかどうか判定しています。

submitボタンを効かなくする魔法文はコレ

return false;を指定しておくとOKです。今回のように条件分岐で return true; になる条件を指定しておけば他でも応用できます。

あと、今回のやり方で作っているのが、このブログの 問い合わせフォーム です。よろしければご参考まで

以上、 @dutchisover でした(^・ω・^)

最近の記事

Sponsored