HTML 要素の disabled 属性を設定すると、その要素は無効化(入力、クリック等ができなくなる)されます。
今回は、jQuery を使用して HTML 要素の disabled 属性を設定する方法を解説いたします。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
jQuery で disabled を設定する場合は prop メソッドを使用して 次のように記述します。
$(セレクタ).prop("disabled", true);
jQuery で HTML 要素の属性を操作する際には prop メソッド か attr メソッドを使用しますが、disabledやselected、checked のような jQuery プロパティには prop メソッドの使用が推奨されています。
attr メソッドを使用すると 不具合の原因になりかねないので、disabled の設定には prop メソッドを使用します。
prop メソッドについてはjQuery【 prop 】真偽値属性には prop メソッドをご参照下さい。
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);
」の記述で ボタンの無効化が解消されます。
今度は 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);
」の記述で 無効化が解消されます。
jQueryの disabled 属性について、いかがでしたでしょうか。
「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。
今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。
INTERNOUS,inc. All rights reserved.