ITコラム

jquery disabled

jQuery

2018.11.06

jQuery【 disabled 】ボタンや入力欄を無効化する

HTML 要素の disabled 属性を設定すると、その要素は無効化(入力、クリック等ができなくなる)されます。
今回は、jQuery を使用して HTML 要素の disabled 属性を設定する方法を紹介します。

目次

1. disabled の設定方法
2. disabled でボタンを無効化する
3. disabled で入力欄を無効化する

1. disabled の設定方法

 
jQuery で disabled を設定する場合は prop メソッドを使用して 次のように記述します。

$(セレクタ).prop("disabled", true);

jQuery で HTML 要素の属性を操作する際には prop メソッド か attr メソッドを使用しますが、disabledやselected、checked のような jQuery プロパティには prop メソッドの使用が推奨されています。

attr メソッドを使用すると 不具合の原因になりかねないので、disabled の設定には prop メソッドを使用します。

prop メソッドについてはjQuery【 prop 】真偽値属性には prop メソッドをご参照下さい。

▲目次へ戻る

 

2. disabled でボタンを無効化する

 
jQuery で disabled を設定して、OK ボタンを無効にします。
入力欄をクリックしてみて下さい。
( reset ボタンをクリックするとリセットされます。)


 

 
少し分かり辛いかもりれませんが、入力欄をクリックすると OK ボタンに表示されているテキストの色が少し薄くなって クリックしても反応がなくなります。

上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#txt1").click(function() {
    $("#btn1").prop("disabled", true);
  });

  $("#btn2").on("click", function(e) {
    $("#btn1").prop("disabled", false);
  });
});
//-->
</script>

<div style="background-color:#CCC; padding:20px;">
  <input type="text" id="txt1">
  <input type="button" id="btn1" value="OK">
 <input type="button" id="btn2" value="reset">
</div>

$("#btn1").prop("disabled", true);」の記述で、id 名が btn1 のボタンが無効化されます。
そして、「$("#btn1").prop("disabled", false);」の記述で ボタンの無効化が解消されます。

▲目次へ戻る

 

3. disabled で入力欄を無効化する

 
今度は disabled を設定して、入力欄を無効にします。
無効ボタンをクリックする前と後とで 入力欄の書き込みを試してみて下さい。
( リセットボタンをクリックすると無効化がリセットされます。)

 

 
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#btn3").click(function() {
    $("#txt2").prop("disabled", true);
  });

  $("#btn4").on("click", function(e) {
    $("#txt2").prop("disabled", false);
  });
});
//-->
</script>

<div style="background-color:#CCC; padding:20px;">
  <input type="button" id="btn3" value="無効">
  <input type="button" id="btn4" value="リセット">
 <input type="text" id="txt2">
</div>

$("#txt2").prop("disabled", true);」の記述で id 名が txt2 のテキストボックスが無効化され、「$("#txt2").prop("disabled", false);」の記述で 無効化が解消されます。

▲目次へ戻る

SHARE

最新記事

無料相談する

INTERNOUS,inc. All rights reserved.