
スキルアップ
2021.01.22
家でできる仕事おすすめ13選!趣味やスキルを活かして時間を有効活用
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
jQuery
2018.11.06
HTML 要素の disabled 属性を設定すると、その要素は無効化(入力、クリック等ができなくなる)されます。
今回は、jQuery を使用して HTML 要素の disabled 属性を設定する方法を紹介します。
1.disabled の設定方法
2.disabled でボタンを無効化する
3.disabled で入力欄を無効化する
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); 」の記述で 無効化が解消されます。
スキルアップ
2021.01.22
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
スキルアップ
2021.01.22
大学生のうちにプログラミングスキルを身につけておくべきか悩んでいる方、エンジニアとして働くことに興味がある方はぜひご覧ください! 大学生でプログラミングを習得するメリット、おすすめのプログラミング言語&学習法、失敗しない […]
スキルアップ
2021.01.22
本記事では、給料やお金をもらいながらでもプログラミングを学べる方法や、未経験からでもエンジニアへの転職が可能な理由について紹介します。プログラミングスキルが未経験者の就職や転職において有利となる理由も解説。これからプログ […]
スキルアップ
2021.01.21
「高卒者のお給料って高いの?低いの?」「大学を中退しても高収入は得られる?」最近は高卒採用に力を入れる企業が続々と増えていますが、こんなふうに考えて最初の一歩が踏み出せない学生さんも多いはず。そこで今回は、学歴・世代・男 […]
スキルアップ
2021.01.20
本記事では、料金重視でプログラミングスクールを探している方向けに、未経験からエンジニアを目指せるおすすめのコースを紹介します。無料プログラミングスクールの仕組みや、かかる費用に差が出る理由、料金以外に重視すべきポイントも […]
スキルアップ
2021.01.08
社会人になっても勉強は必要!と言われても、何を勉強したら良いのか迷いますよね。仕事に関わるスキルを磨いたり、資格を取得したりする他にも、勉強できることはたくさんあります。ここでは、社会人が勉強するメリット、オススメの勉強 […]
INTERNOUS,inc. All rights reserved.