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

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

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

disabledはセレクタに直接、指定することで無効になっている要素を指定することができますが、jQueryのattr()メソッドを使用することでも指定した要素が無効なのかどうかを確認することができます。

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

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

⚫︎ jQueryのメソッドを使って無効になっている要素を指定する場合

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

ハルトさん

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

さとみさん

お願いします!

:disabledとは

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

:disabledの書き方

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

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

さとみさん

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

ハルトさん

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

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

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

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

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

sample.html

index.js

出力結果

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

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

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

sample.html

index.js

出力結果

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

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

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

sample.html

index.js

出力結果

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

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

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

sample.html

index.js

出力結果

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

さとみさん

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

ハルトさん

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

jQueryのメソッドで無効になっている要素を指定する場合

jQueryのメソッドで無効になっている特定の要素を指定するにはattr()メソッドを使用します。

attr()メソッドについて詳しく知りたい場合はこちらをご参考ください。

その為、今回はテキストボックスの場合に使用してみます。

sample.html

index.js

出力結果

jQueryのattr()メソッドによって無効になっている特定の要素を指定することができます。
その為、ボタンを押すと、無効になっている要素の背景色が変化しています。

今回のポイント

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

⚫︎ jQueryで無効になっている要素を指定するには:disabledという擬似クラスを使用する

⚫︎ 擬似クラスで無効になっている要素を指定するにはセレクタの後ろに「:disabled」を指定する

⚫︎ jQueryのメソッドで無効になっている要素を指定する場合はattr()メソッドを指定する

Writer

Soshi

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

最新の案件情報