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

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.