【jQuery】input要素に文字を入れたかどうかで、送信ボタンのdisabledを設定したり解除したりする

「disabled」とは

htmlのフォームの各要素にdisabledを指定すると、その要素が無効化され、入力できなくしたり、ボタンが押せなくしたりできます。

<form>
	<input type="text" name="xx" value="">
	<button type="submit" disabled>送信</button>

</form>

みたいな感じで書いた場合、このフォームの送信ボタンが押せない状況を作れるわけですね。 正確には、「disabled=disabled」と書くらしいのですが、「disabled」だけでも問題ありません。

jQueryで「disabled」をつけたり外したりする

例えば、
ある入力項目に文字が入力されない限りは、ボタンが押せないようにする。 １文字でも入力されたら、ボタンが押せるようにする
みたいなことがやりたいケースを想定してみます。 上記のフォームで言えば、text入力項目に文字が入れられたかどうかで、送信ボタンのdisabledをつけたり外したりできれば良い、というやつです。

まずはhtml。

<form>
	<input type="text" name="xx" value="" id="input1">
	<button type="submit" id="btn1" disabled>送信</button>

</form>

わかりやすいように、id名をつけておきます。 続いてjQuery

  $("#input1").on("input", function() {

  		var input = $(this).val(); //input に入力された文字を取得

  		if(input){ //もし文字が入っていれば

  			$("#btn1").prop('disabled', false); //disabled を無効にする＝ボタンが押せる

  		}else{

  			$("#btn1").prop('disabled', true); //disabled を有効にする＝ボタンが押せない
  		}

  });

こんな感じです。
以前は、「attr」を使って
・有効化 attr(‘disabled ‘,’disabled’); ・無効化 attr(‘disabled ‘,false); または attr(‘disabled ‘,”);
みたいな書き方もできましたが、今はうまく動かないと思った方が良いです。 「prop」を使いましょう。

「false」を指定すれば、disabledを無効化、つまりボタンが押せるようになり、 「true」を指定すれば、disabledを有効化、つまりボタンが押せなくなるようになります。
上記の例では、ボタンにしましたが、もちろん入力項目自体にも同じようなことができますよ。