jQuery 要素のdisabled判定・解除・設定する方法

要素が disabled かどうか、状態を判定するには、prop() もしくは is() を使います。

$(要素).prop('disabled');
$(要素).is(':disabled');

prop() を利用する場合は、引数に「disabled」を指定します。is() を利用する場合は、引数に「:disabled」を指定します。先頭に「:(コロン」が付くので忘れずに設定しましょう。

「disabled」属性の付与・解除には prop() を使います。

$(要素).prop('disabled', true); // 付与
$(要素).prop('disabled', false); // 解除

prop() の第二引数に true を設定すると付与され、false を設定すると解除されます。

まずは仕様を決めましょう。ホームページのコンタクトフォームでは、プライバシーポリシーへの同意にチェックを入れたら送信ボタンが押せるようにするという仕様がよくあります。これをサンプルとして作ってみましょう。

<p><input type="checkbox" name="check">同意する</p>
<button id="btnSend" disabled>送信</button>
<p>送信ボタンは <span id="is">disabled</span> です。</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function() {
  $('input[name="check"]').change(function() {
    if ( $(this).is(':checked') ) {
      $('#btnSend').prop('disabled',false);
    } else {
      $('#btnSend').prop('disabled',true);
    }
    $('#is').text(
      $('#btnSend').is(':disabled') ? "disabled" : "enabled"
    );
  });
});
</script>

「同意する」にチェックを入れたら、送信ボタンが利用可になり、ボタンの下に状態を表示します。

ふむふむ、いい感じに動いていますね＾＾

jQueryで要素のdisabled判定・解除・設定する方法を紹介しました。

disabled の判定には prop() か is() のどちらがいいか・・・という話になると、正直どちらでもいいと思います。個人的には is() を使っています。理由は特になくて、ずっと使っているからってレベルです。

ただ is() の場合は、先頭に「:(コロン」を付けないといけないので、忘れっぽい方は prop() を覚えておけばいいと思います。prop() だけで、設定・解除・判定まで全部できますからね。これから覚える方は prop() を覚えておきましょう。

あ、でももし忘れたらこのサイトを見に来てくださいね。