.net column
.NET開発者のためのブログメディア

jQueryでのdisabledの扱い方とは?disabledの扱い方を紹介

2021年01月15日

SE
disabledの扱い方がよく理解できないので教えてください。

PM
まずdisabledの特性について理解していきましょう。

jQueryでのdisabledの扱い方とは?


今回は、jQueryでのdisabledの扱い方について説明します。

disabledとは、無効状態を表現するものです。ボタンやテキストボックス、セレクトボックスなどを無効にしたり、無効状態を解除したりできます。また、無効状態を取得し、判定文に使用することもできます。

jQueryでのdisabledの扱い方に興味のある方はぜひご覧ください。

設定

jQueryでdisabledを設定する(無効にする)には、propメソッドを使用します。

HTMLを以下に記載します。

jQueryは以下のように記述します。

実行すると、テキストボックス、セレクトボックス、ボタンが無効になります。
propメソッドでdisabledが設定されていることが分かります。

解除

jQueryでdisabledを解除するには、同じくpropメソッドを使用します。HTMLを以下に記載します。

jQueryは以下のように記述します。

実行すると、テキストボックス、セレクトボックス、ボタンが有効になります。
propメソッドでdisabledが解除されていることが分かります。

判定

jQueryでdisabled状態を判定するには、同じくpropメソッドを使用します。

HTMLを以下に記載します。

jQueryは以下のように記述します。

実行すると、disabled状態が取得され、p要素に表示されていることが分かります。

一括操作

jQueryでdisabled状態を一括操作する方法を紹介します。

HTMLを以下に記載します。

jQueryは以下のように記述します。

id指定でfindし、複数要素指定でdisabledに変更しています。
実行すると、テキストボックス、セレクトボックス、ボタンが無効になることが分かります。

イベントで操作

disabled状態をイベント操作する方法を紹介します。
HTMLを以下に記載します。

jQueryは以下のように記述します。
実行すると、チェックボックスのチェックON/OFFを切替えることで、disabled状態が反転することが分かります。
SE
なるほど。HTML要素の属性に付与すると無効化できる属性ということですね。

PM
無効化を解除したり、状態を判定できるメソッドもあります。

まとめ

いかがでしたでしょうか。jQueryでのdisabledの扱い方について説明しました。

disabledとは、無効状態を表現するものです。ボタンやテキストボックス、セレクトボックスなどを無効にしたり、無効状態を解除したりできます。また、無効状態を取得し、判定文に使用することもできます。

ぜひご自身でソースコードを書いて、理解を深めてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags