HTMLのDisabled属性活用術！効果的な5つの手法

はじめに
【この記事で学べること】
【HTMLのdisabled属性とは】
【基本的な使い方】
【対処法】
【注意点】
【カスタマイズ】
【5つの応用例とサンプルコード】
まとめ

はじめに

この記事を読めば、HTMLのdisabled属性を活用した効果的な手法を身につけることができます。

【この記事で学べること】

HTMLのdisabled属性は、フォーム要素の利用を制限するために使用される属性です。

この記事では、その基本的な使い方や注意点、カスタマイズ方法について詳しく解説し、5つの応用例とそれに対応するサンプルコードをご紹介します。

【HTMLのdisabled属性とは】

disabled属性は、HTMLのフォーム要素に対して、利用を制限したり、特定の条件下でのみ利用可能にしたりするために使用されます。

具体的には、テキストボックスやボタン、チェックボックスなどの要素に対して、disabled属性を追加することで、その要素を非活性化（無効化）することができます。

【基本的な使い方】

disabled属性の基本的な使い方は、下記のようにフォーム要素に対してdisabled属性を追加するだけです。

<input type="text" disabled>

【対処法】

disabled属性が設定されたフォーム要素は、通常、グレーアウトされて操作できなくなりますが、JavaScriptを使用して動的にdisabled属性を追加・削除することで、要素の活性・非活性を切り替えることができます。

下記のサンプルコードでは、ボタンをクリックすることでテキストボックスのdisabled属性を切り替えています。

<!DOCTYPE html>
<html>
<head>
<script>
function toggleDisabled() {
  var textBox = document.getElementById("myTextBox");
  textBox.disabled = !textBox.disabled;
}
</script>
</head>
<body>
<input type="text" id="myTextBox">
<button onclick="toggleDisabled()">Toggle Disabled</button>
</body>
</html>

【注意点】

disabled属性を利用する際の注意点は下記の通りです。

disabled属性が設定されたフォーム要素の値は、フォームの送信時に送信されません。

そのため、必要な情報を送信する際には、disabled属性を解除するか、別の方法で値を送信する必要があります。
CSSでdisabled属性が設定された要素の見た目を変更することができますが、ブラウザによってはデフォルトのスタイルが異なる場合があるため、注意が必要です。

【カスタマイズ】

disabled属性が設定された要素の見た目を変更する方法として、CSSを利用することができます。

下記のサンプルコードでは、disabled属性が設定されたテキストボックスの背景色を変更しています。

<!DOCTYPE html>
<html>
<head>
<style>
input:disabled {
  background-color: #cccccc;
}
</style>
</head>
<body>
<input type="text" disabled>
</body>
</html>

【5つの応用例とサンプルコード】

disabled属性を活用した5つの応用例とサンプルコードをご紹介します。

○応用例1：フォーム要素の活性・非活性の切り替え

下記のサンプルコードでは、チェックボックスの状態に応じてテキストボックスのdisabled属性を切り替えています。

<!DOCTYPE html>
<html>
<head>
<script>
function toggleSubmitButton() {
  var submitButton = document.getElementById("submitButton");
  var agreeCheckbox = document.getElementById("agreeCheckbox");
  submitButton.disabled = !agreeCheckbox.checked;
}
</script>
</head>
<body>
<form>
  <input type="checkbox" id="agreeCheckbox" onclick="toggleSubmitButton()">利用規約に同意する
  <br>
  <input type="submit" id="submitButton" disabled>
</form>
</body>
</html>

○応用例2：条件付き送信ボタンの活性化

下記のサンプルコードでは、利用規約に同意した場合のみ、送信ボタンが活性化されるようになっています。

<!DOCTYPE html>
<html>
<head>
<script>
function toggleSubmitButton() {
  var submitButton = document.getElementById("submitButton");
  var agreeCheckbox = document.getElementById("agreeCheckbox");
  submitButton.disabled = !agreeCheckbox.checked;
}
</script>
</head>
<body>
<form>
  <input type="checkbox" id="agreeCheckbox" onclick="toggleSubmitButton()">利用規約に同意する
  <br>
  <input type="submit" id="submitButton" disabled>
</form>
</body>
</html>

○応用例3：ラジオボタンやチェックボックスの制御

下記のサンプルコードでは、ラジオボタンの選択に応じて、対応するテキストボックスのdisabled属性を切り替えています。

<!DOCTYPE html>
<html>
<head>
<script>
function toggleTextBoxes() {
  var radio1 = document.getElementById("radio1");
  var radio2 = document.getElementById("radio2");
  var textBox1 = document.getElementById("textBox1");
  var textBox2 = document.getElementById("textBox2");

  textBox1.disabled = !radio1.checked;
  textBox2.disabled = !radio2.checked;
}
</script>
</head>
<body>
<input type="radio" id="radio1" name="option" onclick="toggleTextBoxes()" checked>
<input type="text" id="textBox1">
<br>
<input type="radio" id="radio2" name="option" onclick="toggleTextBoxes()">
<input type="text" id="textBox2" disabled>
</body>
</html>

○応用例4：セレクトボックスの選択肢の制限

下記のサンプルコードでは、セレクトボックスの選択肢に応じて、対応するテキストボックスのdisabled属性を切り替えています。

<!DOCTYPE html>
<html>
<head>
<script>
function toggleTextBox() {
  var select = document.getElementById("select");
  var textBox = document.getElementById("textBox");

  textBox.disabled = (select.value !== "option3");
}
</script>
</head>
<body>
<select id="select" onchange="toggleTextBox()">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>
<input type="text" id="textBox" disabled>
</body>
</html>

○応用例5：カスタムスタイルの適用

下記のサンプルコードでは、disabled属性が設定されたテキストボックスに対して、カスタムスタイルを適用しています。

<!DOCTYPE html>
<html>
<head>
<style>
input:disabled {
  background-color: #f0e68c;
  color: #8b0000;
  border: 2px dashed #8b0000;
}
</style>
</head>
<body>
<input type="text" disabled>
</body>
</html>