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

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

サンプル（送信されません）

作業内容

要望

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

仕様

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

できなかったこと

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

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

jQueryを確認してみよう！

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

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

jQueryを解説します！

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

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

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

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

もし、「$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より多かったら、以外の場合、（つまり０の時）

「$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属性を指定した要素を無効化します

サンプル（送信されません）

以上です。