フォームなどで一時的に操作できないようにするdisabledをjQueryを使って設定する方法です。
attr()だとうまく動作しなかったりするため、prop()を使うようにしましょう。
目次
disabledの設定
まずはHTMLのフォームにdisabledを追加してみましょう。
構文
jQuery
|
1 |
$(button).prop('disabled', true); |
disabledはattr()ではなくprop()を使います。
jQuery1.6よりattr()はHTML属性、prop()はjQueryプロパティを操作するメソッドと役割がハッキリ分かれました。
誤動作の原因にもなりますので、disabledやselectedcheckedといったプロパティはprop()で操作しましょう。
チェックを入れたらボタンがdisabledになるサンプル
それではここで、disabledのサンプルをご紹介します。
「同意できない」にチェックを入れるとボタンがクリックできなくなります。
HTML
|
1 2 |
<input type="checkbox" name="check">同意できない<br> <button type="button">クリック</button> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { //チェックボックスにチェックが入ったら $('input[type="checkbox"]').change(function() { //ボタンをdisabledにする $(button).prop('disabled', true); }); }); |
結果（動作サンプル）
下記チェックボックスにチェックを入れると、ボタンがdisabledになるかと思います。
同意できない
ボタンが押せなくなりましたか？
ちなみにattr()を使っても一応動作はしますがprop()を使いましょう。
参考：jQueryでチェックボックスを操作するさまざまな方法
disabledの解除
次にdisabledを解除してみましょう。
構文
jQuery
|
1 |
$(button).prop('disabled', false); |
prop()の第二引数をfalseにするだけです。
prop()はプロパティの状態をtruefalseで返してくれるので、フォーム周りのプロパティと相性がいいんですね。
チェックを入れるとボタンが押せるサンプル
先ほどとは逆で、「同意する」にチェックを入れるとボタンがクリックできるようになります。
ボタンにはあらかじめdisabledが設定されています。
HTML
|
1 2 |
<input type="checkbox" name="check">同意する<br> <button type="button" disabled>クリック</button> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { //チェックボックスにチェックが入ったら $('input[type="checkbox"]').change(function() { //ボタンのdisabledを解除する $(button).prop('disabled', false); }); }); |
結果（動作サンプル）
先にボタンがクリック出来ないのを確認し、下記チェックボックスにチェックを入れると、ボタンが押せるようになるかと思います。
同意する
ボタンが押せるようになりましたか？
ちなみにremoveAttr()でdisabledを削除すれば同様に解除できますが、prop()を使いましょう。
disabledの判定
最後に所定の要素がdisableかどうか、状態を取得してみましょう。
disabledの判定方法を2つご紹介します。
prop()での構文
jQuery
|
1 |
$(button).prop('disabled'); |
prop()にdisabledを指定するだけです。
is()での構文
jQuery
|
1 |
$(button).is(':disabled'); |
is()に:disabledを指定します。
disabledの頭に:（コロン）を付けるのを忘れないようにしましょう。
チェックを入れるたびにdisabledの判定を出力するサンプル
さきほどご紹介したdisabledの状態を取得する2つのサンプルをご紹介します。
HTML
|
1 2 3 4 5 6 |
<p><button type="button" id="prop_btn"></button> <input type="checkbox" name="prop">：prop</p> <p><button type="button" id="is_btn"><input type="checkbox" name="is">：is</p> <!--結果出力用--> <p id="p01"></p> <p id="p02"></p> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
$(function() { // propのチェックボックスをチェックしたら発動 $('input[name="prop"]').change(function() { // prop()でチェックの状態を取得 var prop = $('input[name="prop"]').prop('disabled'); // もしpropがdisabledだったら if (prop) { // ボタンをdisabledを解除 $('#prop_btn').prop('disabled', false); // テキストをリセット $('#p01').text(''); } else { // ボタンのdisabledに設定 $('#prop_btn').prop('disabled', true); // propはdisabledと出力 $('#p01').text('propはdisabled'); } }); // isのチェックボックスをチェックしたら発動 $('input[name="is"]').change(function() { // is()でチェックの状態を取得 var is = $('input[name="is"]').is(':disabled'); // もしisがdisabledだったら if (is) { $('#is_btn').prop('disabled', false); $('#p02').text(''); } else { $('#is_btn').prop('disabled', true); $('#p02').text('isはdisabled'); } }); }); |
結果（動作サンプル）
下記チェックボックスをチェックすると、その下に状態が出力されます。
:prop
:is
チェックを入れたら対応するテキストが表示され、外すとそのテキストも消えるかと思います。
参考：jQueryのchange()で値が変更されたら発動
参考：text() でHTML要素にテキストを追加
