JavaScriptとjQueryでdisabled属性を判定する方法14選

●disabled属性とは？
- ○disabled属性の基本
- ○disabled属性の役割
●JavaScriptでdisabled属性を判定する方法
●jQueryでdisabled属性を判定する方法
●よくあるエラーと対処法
●disabled属性の応用例
まとめ

●disabled属性とは？

disabled属性は、HTMLの要素を無効化するための属性です。

この属性が設定された要素は、ユーザーからの操作を受け付けなくなります。

○disabled属性の基本

disabled属性は、ボタンやテキストフィールド、ラジオボタン、チェックボックスなど、様々な要素に設定することができます。

この属性を設定するには、単にdisabled属性を要素に追加するだけです。

<button disabled>無効化されたボタン</button>
<input type="text" disabled>
<input type="radio" disabled>
<input type="checkbox" disabled>

このようにdisabled属性を設定すると、要素が無効化され、ユーザーからの操作を受け付けなくなります。

○disabled属性の役割

disabled属性の主な役割は、次の2つです。

ユーザーからの不必要な操作を防ぐ
フォームの送信時に、無効化された要素のデータを送信しない

例えば、ユーザーが必要な情報を入力していない状態で、フォームの送信ボタンを無効化することで、不完全なデータの送信を防ぐことができます。

また、無効化された要素のデータは、フォームの送信時に自動的に除外されるため、サーバー側で不要なデータを処理する必要がありません。

●JavaScriptでdisabled属性を判定する方法

さて、disabled属性について理解が深まったところで、いよいよJavaScriptを使ってdisabled属性を判定する方法を見ていきましょう。

JavaScriptには、disabled属性を判定するための様々な方法があります。

○サンプルコード1：getAttributeを使った判定

まずは、getAttributeメソッドを使った判定方法から見ていきましょう。

getAttributeメソッドは、要素の属性値を取得するためのメソッドです。

const element = document.getElementById('myElement');
if (element.getAttribute('disabled') !== null) {
  console.log('この要素はdisabledです');
} else {
  console.log('この要素はdisabledではありません');
}

このコードでは、idがmyElementである要素を取得し、getAttributeメソッドを使ってdisabled属性の値を取得しています。

disabled属性が設定されている場合、getAttributeメソッドはdisabledという文字列を返します。

一方、disabled属性が設定されていない場合、getAttributeメソッドはnullを返します。

したがって、getAttributeメソッドの戻り値がnullでない場合、その要素はdisabledであると判定できます。

実行結果

この要素はdisabledです

○サンプルコード2：hasAttributeを使った判定

次に、hasAttributeメソッドを使った判定方法を見ていきましょう。

hasAttributeメソッドは、要素が指定された属性を持っているかどうかを真偽値で返します。

const element = document.getElementById('myElement');
if (element.hasAttribute('disabled')) {
  console.log('この要素はdisabledです');
} else {
  console.log('この要素はdisabledではありません');
}

このコードでは、idがmyElementである要素を取得し、hasAttributeメソッドを使ってdisabled属性の有無を判定しています。

disabled属性が設定されている場合、hasAttributeメソッドはtrueを返します。

一方、disabled属性が設定されていない場合、hasAttributeメソッドはfalseを返します。

したがって、hasAttributeメソッドの戻り値がtrueの場合、その要素はdisabledであると判定できます。

実行結果

この要素はdisabledです

hasAttributeメソッドを使えば、getAttributeメソッドよりもシンプルにdisabled属性の有無を判定できます。

○サンプルコード3：propertyを使った判定

JavaScriptでは、要素のプロパティを使ってdisabled属性を判定することもできます。

const element = document.getElementById('myElement');
if (element.disabled) {
  console.log('この要素はdisabledです');
} else {
  console.log('この要素はdisabledではありません');
}

このコードでは、idがmyElementである要素を取得し、disabledプロパティを使ってdisabled属性を判定しています。

disabled属性が設定されている場合、disabledプロパティはtrueを返します。

一方、disabled属性が設定されていない場合、disabledプロパティはfalseを返します。

したがって、disabledプロパティの値がtrueの場合、その要素はdisabledであると判定できます。

実行結果

この要素はdisabledです

○サンプルコード4：disabledプロパティを使った判定

サンプルコード3でも紹介したように、disabledプロパティを使ってdisabled属性を判定することができます。

ここでは、もう少し詳しくdisabledプロパティの使い方を見ていきましょう。

const element = document.getElementById('myElement');
if (element.disabled === true) {
  console.log('この要素はdisabledです');
} else {
  console.log('この要素はdisabledではありません');
}

このコードでは、idがmyElementである要素を取得し、disabledプロパティを使ってdisabled属性を判定しています。

disabledプロパティの値がtrueの場合、その要素はdisabledであると判定できます。

ただし、disabledプロパティの値は、必ずしもtrueまたはfalseとは限りません。disabledプロパティの値が空文字列やnullの場合もあります。

そのため、厳密に判定するためには、次のようにするとよいでしょう。

const element = document.getElementById('myElement');
if (element.disabled === true || element.disabled === 'true') {
  console.log('この要素はdisabledです');
} else {
  console.log('この要素はdisabledではありません');
}

このコードでは、disabledプロパティの値がtrueまたは文字列の’true’の場合、その要素をdisabledであると判定しています。

実行結果

この要素はdisabledです

○サンプルコード5：CSSセレクタを使った判定

最後に、CSSセレクタを使ったdisabled属性の判定方法を見ていきましょう。

CSSセレクタを使えば、disabled属性が設定された要素を簡単に選択することができます。

const disabledElements = document.querySelectorAll('[disabled]');
console.log(disabledElements.length + '個の要素がdisabledです');

このコードでは、CSSセレクタ[disabled]を使って、disabled属性が設定された要素をすべて選択しています。

querySelectorAllメソッドは、指定されたCSSセレクタに一致するすべての要素を返します。

したがって、disabledElementsには、disabled属性が設定された要素がすべて含まれます。

disabledElements.lengthを使えば、disabled属性が設定された要素の数を取得することができます。

実行結果

3個の要素がdisabledです

このように、CSSセレクタを使えば、JavaScriptのコードを書かなくても、disabled属性が設定された要素を簡単に選択することができます。

●jQueryでdisabled属性を判定する方法

JavaScriptでdisabled属性を判定する方法について理解が深まったところで、今度はjQueryを使ってdisabled属性を判定する方法を見ていきましょう。

jQueryは、JavaScriptのライブラリの一つで、少ないコード量で効率的にWebアプリケーションを開発することができます。

○サンプルコード6：attrを使った判定

まずは、jQueryのattrメソッドを使ったdisabled属性の判定方法から見ていきましょう。

attrメソッドは、要素の属性値を取得したり、設定したりするためのメソッドです。

if ($('#myElement').attr('disabled') !== undefined) {
  console.log('この要素はdisabledです');
} else {
  console.log('この要素はdisabledではありません');
}

このコードでは、idがmyElementである要素を、jQueryの$関数を使って取得しています。

そして、attrメソッドを使ってdisabled属性の値を取得しています。

disabled属性が設定されている場合、attrメソッドはdisabledという文字列を返します。

一方、disabled属性が設定されていない場合、attrメソッドはundefinedを返します。

したがって、attrメソッドの戻り値がundefinedでない場合、その要素はdisabledであると判定できます。

実行結果

この要素はdisabledです

○サンプルコード7：propを使った判定

次に、jQueryのpropメソッドを使ったdisabled属性の判定方法を見ていきましょう。

propメソッドは、要素のプロパティを取得したり、設定したりするためのメソッドです。

if ($('#myElement').prop('disabled')) {
  console.log('この要素はdisabledです');
} else {
  console.log('この要素はdisabledではありません');
}

このコードでは、idがmyElementである要素を、jQueryの$関数を使って取得しています。

そして、propメソッドを使ってdisabledプロパティの値を取得しています。

disabled属性が設定されている場合、propメソッドはtrueを返します。

一方、disabled属性が設定されていない場合、propメソッドはfalseを返します。

したがって、propメソッドの戻り値がtrueの場合、その要素はdisabledであると判定できます。

実行結果

この要素はdisabledです

○サンプルコード8：is(‘:disabled’)を使った判定

jQueryには、is(‘:disabled’)という便利なメソッドがあります。

これを使えば、要素がdisabledかどうかを簡単に判定することができます。

if ($('#myElement').is(':disabled')) {
  console.log('この要素はdisabledです');
} else {
  console.log('この要素はdisabledではありません');
}

このコードでは、idがmyElementである要素を、jQueryの$関数を使って取得しています。

そして、is(‘:disabled’)メソッドを使って、その要素がdisabledかどうかを判定しています。

要素がdisabledの場合、is(‘:disabled’)メソッドはtrueを返します。

一方、要素がdisabledでない場合、is(‘:disabled’)メソッドはfalseを返します。

したがって、is(‘:disabled’)メソッドの戻り値がtrueの場合、その要素はdisabledであると判定できます。

実行結果

この要素はdisabledです

is(‘:disabled’)メソッドを使えば、jQueryのコードをシンプルに書くことができます。

○サンプルコード9：CSSセレクタを使った判定

jQueryでは、CSSセレクタを使ってdisabled属性が設定された要素を選択することもできます。

const $disabledElements = $('[disabled]');
console.log($disabledElements.length + '個の要素がdisabledです');

このコードでは、CSSセレクタ[disabled]を使って、disabled属性が設定された要素をすべて選択しています。

jQueryの$関数は、指定されたCSSセレクタに一致するすべての要素を返します。

したがって、$disabledElementsには、disabled属性が設定された要素がすべて含まれます。

$disabledElements.lengthを使えば、disabled属性が設定された要素の数を取得することができます。

実行結果

3個の要素がdisabledです

このように、jQueryのCSSセレクタを使えば、JavaScriptのコードを書かなくても、disabled属性が設定された要素を簡単に選択することができます。

○サンプルコード10：eachを使った一括判定

最後に、jQueryのeachメソッドを使って、複数の要素のdisabled属性を一括で判定する方法を見ていきましょう。

eachメソッドは、選択された要素に対して、指定された関数を順番に実行するためのメソッドです。

$('input').each(function() {
  if ($(this).is(':disabled')) {
    console.log($(this).attr('id') + 'はdisabledです');
  } else {
    console.log($(this).attr('id') + 'はdisabledではありません');
  }
});

このコードでは、input要素をすべて選択し、eachメソッドを使って、それぞれの要素に対して関数を実行しています。

関数の中では、$(this)を使って、現在の要素を取得しています。そして、is(‘:disabled’)メソッドを使って、その要素がdisabledかどうかを判定しています。

実行結果

input1はdisabledです
input2はdisabledではありません
input3はdisabledです

このように、jQueryのeachメソッドを使えば、複数の要素のdisabled属性を一括で判定することができます。

●よくあるエラーと対処法

JavaScriptやjQueryを使ってdisabled属性を判定する際、初心者の方はいくつかのエラーにぶつかることがあると思います。

ここでは、そんなエラーの原因と対処法について見ていきましょう。

○「Uncaught TypeError」エラーへの対処

「Uncaught TypeError: Cannot read property ‘disabled’ of null」というエラーが発生することがあります。

このエラーは、JavaScriptやjQueryで要素を取得しようとしたときに、その要素が存在しない場合に発生します。

たとえば、次のようなコードを実行したとします。

const element = document.getElementById('myElement');
if (element.disabled) {
  console.log('この要素はdisabledです');
} else {
  console.log('この要素はdisabledではありません');
}

このコードでは、idがmyElementである要素を取得し、disabledプロパティを使ってdisabled属性を判定しています。

しかし、もしHTMLにidがmyElementである要素が存在しない場合、document.getElementById(‘myElement’)はnullを返します。

そして、nullに対してdisabledプロパティにアクセスしようとするため、「Uncaught TypeError: Cannot read property ‘disabled’ of null」というエラーが発生してしまうのです。

このエラーを防ぐためには、要素が存在するかどうかを確認してから、disabledプロパティにアクセスするようにします。

const element = document.getElementById('myElement');
if (element !== null && element.disabled) {
  console.log('この要素はdisabledです');
} else {
  console.log('この要素はdisabledではありません');
}

このように、要素が存在する場合にのみdisabledプロパティにアクセスするようにすれば、「Uncaught TypeError」エラーを防ぐことができます。

○「undefined」エラーへの対処

「Uncaught TypeError: Cannot read property ‘disabled’ of undefined」というエラーが発生することがあります。

このエラーは、JavaScriptやjQueryで要素を取得しようとしたときに、その要素が存在しない場合に発生します。

たとえば、次のようなコードを実行したとします。

const elements = document.getElementsByTagName('input');
for (let i = 0; i < elements.length; i++) {
  if (elements[i].disabled) {
    console.log(elements[i].id + 'はdisabledです');
  } else {
    console.log(elements[i].id + 'はdisabledではありません');
  }
}

このコードでは、input要素をすべて取得し、disabledプロパティを使ってdisabled属性を判定しています。

しかし、もしHTMLにinput要素が存在しない場合、document.getElementsByTagName(‘input’)は空の配列を返します。

そして、空の配列に対してdisabledプロパティにアクセスしようとするため、「Uncaught TypeError: Cannot read property ‘disabled’ of undefined」というエラーが発生してしまうのです。

このエラーを防ぐためには、要素が存在するかどうかを確認してから、disabledプロパティにアクセスするようにします。

const elements = document.getElementsByTagName('input');
for (let i = 0; i < elements.length; i++) {
  if (elements[i] !== undefined && elements[i].disabled) {
    console.log(elements[i].id + 'はdisabledです');
  } else {
    console.log(elements[i].id + 'はdisabledではありません');
  }
}

このように、要素が存在する場合にのみdisabledプロパティにアクセスするようにすれば、「undefined」エラーを防ぐことができます。

○「object is not a function」エラーへの対処

「Uncaught TypeError: object is not a function」というエラーが発生することがあります。

このエラーは、JavaScriptやjQueryで関数を呼び出そうとしたときに、その関数が存在しない場合に発生します。

たとえば、次のようなコードを実行したとします。

const element = $('#myElement');
if (element.attr('disabled') !== undefined) {
  console.log('この要素はdisabledです');
} else {
  console.log('この要素はdisabledではありません');
}

このコードでは、idがmyElementである要素を、jQueryの$関数を使って取得しています。

そして、attrメソッドを使ってdisabled属性の値を取得しています。

しかし、もしjQueryがページに読み込まれていない場合、$関数は存在しません。

そのため、「Uncaught TypeError: object is not a function」というエラーが発生してしまうのです。

このエラーを防ぐためには、jQueryがページに読み込まれているかどうかを確認してから、$関数を使うようにします。

if (typeof jQuery !== 'undefined') {
  const element = $('#myElement');
  if (element.attr('disabled') !== undefined) {
    console.log('この要素はdisabledです');
  } else {
    console.log('この要素はdisabledではありません');
  }
} else {
  console.log('jQueryがページに読み込まれていません');
}

このように、jQueryがページに読み込まれている場合にのみ$関数を使うようにすれば、「object is not a function」エラーを防ぐことができます。

●disabled属性の応用例

これまでは、JavaScriptとjQueryを使ってdisabled属性を判定する方法について解説してきました。

ここからは、実際のWebアプリケーション開発で、disabled属性をどのように活用できるのかを見ていきましょう。

○サンプルコード11：フォーム送信の制御

フォームの送信ボタンを、入力内容に応じて有効化・無効化することで、ユーザーに適切な入力を促すことができます。

<form id="myForm">
  <input type="text" id="nameInput" required>
  <button type="submit" id="submitButton" disabled>送信</button>
</form>

const nameInput = document.getElementById('nameInput');
const submitButton = document.getElementById('submitButton');

nameInput.addEventListener('input', function() {
  if (nameInput.value.trim() !== '') {
    submitButton.disabled = false;
  } else {
    submitButton.disabled = true;
  }
});

このコードでは、nameInputの値が空でない場合にのみ、submitButtonを有効化しています。

nameInputの値が変更されるたびに、submitButtonのdisabled属性が更新されます。

実行結果

nameInputが空の場合：submitButtonは無効化されます
nameInputに値が入力されている場合：submitButtonは有効化されます

このように、disabled属性を動的に制御することで、フォームの送信を適切に制御することができます。

○サンプルコード12：ボタンの活性/非活性の切り替え

ボタンの活性/非活性を、他の条件に応じて切り替えることで、ユーザーに適切な操作を促すことができます。

<button id="myButton" disabled>クリックしてください</button>

const myButton = document.getElementById('myButton');

setTimeout(function() {
  myButton.disabled = false;
  myButton.textContent = '今すぐクリック！';
}, 3000);

このコードでは、3秒後にmyButtonを有効化し、テキストを変更しています。

このように、ボタンの活性/非活性を動的に切り替えることで、ユーザーに適切なタイミングで操作を促すことができます。

実行結果

ページ読み込み直後：myButtonは無効化され、テキストは「クリックしてください」です
3秒後：myButtonは有効化され、テキストは「今すぐクリック！」に変更されます

○サンプルコード13：入力内容のバリデーション

フォームの入力内容をバリデーションし、不適切な入力がある場合は送信ボタンを無効化することで、ユーザーに適切な入力を促すことができます。

<form id="myForm">
  <input type="email" id="emailInput" required>
  <button type="submit" id="submitButton" disabled>送信</button>
</form>

const emailInput = document.getElementById('emailInput');
const submitButton = document.getElementById('submitButton');

emailInput.addEventListener('input', function() {
  if (emailInput.validity.valid) {
    submitButton.disabled = false;
  } else {
    submitButton.disabled = true;
  }
});

このコードでは、emailInputの入力内容が有効なメールアドレスの形式である場合にのみ、submitButtonを有効化しています。

emailInputの値が変更されるたびに、submitButtonのdisabled属性が更新されます。

実行結果

emailInputが空の場合：submitButtonは無効化されます
emailInputに有効なメールアドレスが入力されている場合：submitButtonは有効化されます
emailInputに無効なメールアドレスが入力されている場合：submitButtonは無効化されます

○サンプルコード14：動的にdisabled属性を設定する

これまでのサンプルコードでは、disabled属性を動的に設定する方法を見てきました。

ここでは、その方法をまとめておきましょう。

// 要素を無効化する
element.disabled = true;
element.setAttribute('disabled', 'disabled');
element.setAttribute('disabled', '');

// 要素を有効化する
element.disabled = false;
element.removeAttribute('disabled');

このように、disabled属性は、プロパティまたは属性として設定・削除することができます。

どちらの方法を使っても、要素の有効/無効を切り替えることができます。

実行結果