HTML DOM Input Colorのdisabledプロパティとは？使い方をわかりやすく解説
HTML DOMのInput Color disabledプロパティは、<input type="color">で作成されるカラーピッカー（カラー入力フィールド）が「有効」か「無効」かを設定・取得するためのプロパティです。
構文
disabledプロパティの構文は以下の通りです。
ブール値（true/false）を取得する場合
inputColorObject.disabled
booleanValueを設定する場合
inputColorObject.disabled = booleanValue
設定できるブール値
「booleanValue」には、以下のいずれかの値を指定できます。
| booleanValue | 説明 |
|---|---|
| true | カラー入力が無効（操作不可）であることを示します。 |
| false | カラー入力が無効化されていないことを示します。これがデフォルト値です。 |
使用例
ここでは、Input Color disabledプロパティを使った具体的なサンプルコードを見てみましょう。ボタンをクリックすると、無効化されていたカラーピッカーが有効になります。
<!DOCTYPE html>
<html>
<head>
<title>Input Color Disabled</title>
</head>
<body>
<form>
Color Picker: <input type="color" id="Color" disabled>
</form>
<button onclick="enableColorInput()">Enable Color Input</button>
<div id="divDisplay"></div>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputColor = document.getElementById("Color");
divDisplay.textContent = 'Color Input disabled: '+inputColor.disabled;
function enableColorInput() {
inputColor.disabled = false;
divDisplay.textContent = 'Color Input disabled: '+inputColor.disabled;
}
</script>
</body>
</html>
出力結果
このコードを実行すると、以下のような動作になります。
「Enable Color Input」ボタンをクリックする前：
初期状態では、disabled属性が付与されているため、カラーピッカーはグレーアウトして操作できません。画面には「Color Input disabled: true」と表示されます。
「Enable Color Input」ボタンをクリックした後：
ボタンをクリックするとJavaScriptのenableColorInput()関数が実行され、inputColor.disabled = false;によってカラーピッカーが有効化されます。表示も「Color Input disabled: false」に更新され、ユーザーが色を選択できるようになります。
まとめ
disabledプロパティを活用すれば、フォームの状態に応じてカラーピッカーの操作可否を動的に制御できます。例えば、他の項目の入力が完了するまでカラー選択をできないようにするなど、ユーザビリティ向上のためのバリデーションやUI制御に役立ちます。
-
HTML DOMのInput Radio disabledプロパティとは？使い方をわかりやすく解説
disabledプロパティとはHTML DOMのInput Radio disabledプロパティは、ラジオボタンを無効化するかどうかを設定、または現在の状態を取得するために使用されるプロパティです。ブール値（true / false）で状態を表し、trueなら要素を無効化、falseなら有効のままとなります。デフォルト値はfalseです。disabledが設定された要素はグレーアウトして表示され、ユーザーがクリックして選択することはできません。構文disabledプロパティを設定する場合の構文は以下の通りです。radioObject.disabled = true|false;trueを指定
-
HTML DOM入力レンジ（range）のdisabledプロパティの使い方を徹底解説
HTML DOM Input Range disabledプロパティとはHTML DOMのInput Range（レンジスライダー）におけるdisabledプロパティは、スライダーを無効化するかどうかを設定または取得するために使用されるプロパティです。このプロパティにはブール値（真偽値）を指定します。trueを設定するとスライダーは無効化され、falseを設定すると有効になります。デフォルト値はfalseです。なお、無効化された要素はグレーアウトして表示され、ユーザーはクリックやドラッグなどの操作を行うことができなくなります。構文（Syntax）disabledプロパティを設定する場合の構文は