jQuery 要素のdisabled判定・解除・設定する方法 ホームページ制作 | 墨田区

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

LINEで送る
Pocket

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

「disabled」属性とは、HTML要素に付与することで要素を無効化し、入力や選択などの操作を制限することができます。ホームページでは、コンタクトフォームやエントリーフォームなどでよく使われている技術です。例えば、必須項目を全て入力しないと送信ボタンが押せないとか、プライバシーポリシーの同意するにチェックを入れたら送信ボタンが押せるようにするとか、様々な用途で使われますね。

ここでは jQueryで「disabled」属性を判定する方法、「disabled」属性を設定・解除する方法 を紹介します。

jQueryでdisabledを判定する

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

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

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


jQueryでdisabledを設定・解除する

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

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

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


jQueryでdisabledを設定・解除・判定するサンプル

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

<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() を覚えておきましょう。

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


おつかれさまでした。

LINEで送る
Pocket

この記事がお役に立ちましたら シェア をお願いいたします。

コメントを残す

コメント(必須)

お名前 (必須)
メールアドレス
(アドレスは公開されません)

Trackback URL