投稿可能な状態になると色が変わるボタンの作り方 – disableを利用

このような一般的なフォームがあります。
投稿可能な状態になると色が変わるという機能をjQueryで作成してみます。

サンプル(送信されません)

作業内容

要望

投稿が可能になった時に、検索ボタンが動くような挙動にしたい。

仕様

検索できない状態はdisable属性を付ける。
1文字でも入力されたら、検索可能にする。
0文字になったら、disable属性を付ける。
IEでも動くようにする。

できなかったこと

IEでdisable属性を利用すると、cssで指定した表示になりません。
ブラウザの持つ見た目になるので注意が必要です。

どういった動作になるかは、サンプルをご確認いただければ、すぐにわかるかと思います。

jQueryを確認してみよう!

jQueryを利用して機能を追加しました。

行っている内容は、シンプルなので、1行ずつ確認していきましょう。

jQueryを解説します!

全て読み込まれたあとにjQueryを動かす準備をします


変数「$text」に「$(‘.textArea’)」を代入します。


変数「$button」に「$(‘.submitBtn’)」を代入します。


変数「disabled_class」に「’disabled’」を代入します。
変数が複数ある場合は、varを1回書けば、あとは、,で複数書くことができます。最後の,は不要です。


もし、「$text.val」が0の時、次を実行してください。


「$button」にdisabledを付けて、さらに、disabledというclassも付けてください。


条件ここまで。


「$text」をkeydown keyup keypress changeのどれかがあった時に、


あ、その前に。「「$text」をkeydown keyup keypress changeのどれかがあった時に」の「入力してあるテキスト」の「長さ」を、変数「thisValueLength」に代入してください。


もし、「thisValueLength」が0より多かったら、次を実行してください。


「$button」についているdisabledを削除して、さらに、disabledというclassも削除してください。


もし、「thisValueLength」が0より多かったら、以外の場合、(つまり0の時)


「$button」にdisabledを付けて、さらに、disabledというclassも付けてください。


条件ここまで。


$text.bind(‘keydown keyup keypress change’,function()を閉じる。


$(function()を閉じる。
});

今回利用したCSSを見てみる

CSSも参考として書いておきます。

CSSの補足説明

input[type=”text”]
inputのうち、typeがtextのものを取得します。

input[type=”submit”]
inputのうち、typeがsubmitのものを取得します。

disabled属性
disabled属性を指定した要素を無効化します


サンプル(送信されません)


以上です。