【jQuery】:disabledで無効になっている要素を指定する!

無効になっている要素を指定するにはjQueryの:disabledを使用します。

jQueryの:disabledとは、無効になっているinput要素を指定することができ、条件によってボタンを非活性にしたい場合やテキストの入力を無効にしたい場合などに使用されます。

今回は、jQueryのdisabledを使って無効になっている要素を指定する方法について以下の内容で解説していきます。

⚫︎ 無効になっている要素がテキストである場合
⚫︎ 無効になっている要素がボタンである場合
⚫︎ 無効になっている要素がラジオボタンである場合

⚫︎ 無効になっている特定の要素を指定する場合

また、jQueryを使用せず、純粋なJavaScriptで入力が無効になっている要素を指定する場合も紹介していきます。

ハルトさん

今回はjQueryの:disabledを使って無効になっている要素を指定する方法について説明していきます。

さとみさん

お願いします!

:disabledとは

:disabledとは、無効になっているinput要素を指定することができます。

:disabledの書き方

jQueryの:disabledの書き方は下記となります。

$の()に「:disabled」を指定することで、無効になっているinput要素を指定することができ、スクリプトを使うと、入力が無効になっている場合でも内容の変更やスタイルシートなどの変更を行うことができます。

さとみさん

$の()に「:disabled」を指定するだけで、無効の要素を指定することができるんですね!

ハルトさん

そうですね。
また、特定の無効の要素だけを指定したい場合は「:disabled」の前にタグ名やクラス名、id名を指定してあげると良いですよ。

無効になっている要素を指定するサンプルコード

無効になっている要素を指定するサンプルコードを紹介します。

無効になっている要素がテキストである場合

無効になっている要素がテキストである場合で要素を指定します。

sample.html

index.js

出力結果

ボタンを押すと、disabled属性が付いているテキスト要素の背景色が変化していることから、無効になっているテキスト要素を指定しています。

無効になっている要素がボタンである場合

無効になっている要素がボタンである場合で要素を指定します。

sample.html

index.js

出力結果

ボタンを押すと、disabled属性が付いているボタン要素の背景色が変化していることから、無効になっているボタン要素を指定しています。

無効になっている要素がラジオボタンである場合

無効になっている要素がラジオボタンである場合で要素を指定します。

sample.html

index.js

出力結果

ボタンを押すと、disabled属性が付いているラジオボタン要素に余白が作成されてしていることから、無効になっているラジオボタン要素を指定しています。

無効になっている特定の要素を指定する場合

無効になっている特定の要素を指定する場合は「:disabled」の前にタグ名やクラス名、id名を指定します。

sample.html

index.js

出力結果

ボタンを押すと、disabled属性が付いている特定の要素の背景色が変化していることから、無効になっている特定の要素を指定しています。

jQueryを使用せずに入力が無効になっている要素を指定する場合

jQueryを使用せずに純粋なJavaScriptのみで入力が無効になっている要素を指定するコードを紹介します。

sample.html

index.js

出力結果

ボタンを押すと、disabled属性が付いている要素の背景色が変化していることから、jQueryを使用せずに入力が無効になっている要素を指定しています。

さとみさん

jQueryを使わず同じことを実行させようとすると、とてもコードが長くなるんですね!
これだとjQueryの方がとても便利です!

ハルトさん

そうですよね。
コードの量や分かりやすさを比較するとあきらかにjQueryの方が良いですよね。

今回のポイント

disabledで入力が無効になっている要素を指定

⚫︎ 無効になっている要素を指定jQueryの:disabledを使用する

⚫︎ disabledで入力が無効になっている要素を指定するには$の()に「:disabled」を指定する

⚫︎ 無効になっている特定の要素を指定する場合は:disabledの前にタグ名やクラス名、id名を指定する

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し