【HTML Living Standard】disabled属性の使い方
disabled属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
disabledプロパティは、HTML要素の機能を無効化し、ユーザーからの操作を制限する状態を保持するプロパティです。このプロパティは、特にフォームコントロールに関連する要素に対して適用されます。具体的には、<input>、<textarea>、<select>、<button>といった入力・操作要素のほか、関連するグループ化要素である<fieldset>、<option>、<optgroup>などに設定することが可能です。
disabledプロパティが要素に設定されると、その要素はクリック、テキスト入力、選択といったユーザーによる操作を受け付けなくなります。視覚的にも、多くの場合、要素が薄暗く表示されるなどして、操作が不可能であることがユーザーに伝えられます。また、無効化されたフォームコントロールの値は、フォームがサーバーに送信される際に含まれなくなります。
このプロパティは「真偽値属性」として扱われ、属性が存在するだけで要素が無効状態になります。例えば、<button disabled>と記述するだけで有効です。属性に特定の値を設定する必要はありません（例: disabled="disabled"としても動作は同じですが、推奨されるのは属性名のみの記述です）。
主な使用例としては、ユーザーが特定の情報をすべて入力するまで送信ボタンを無効にしておく場合や、ユーザーの権限レベルに応じてフォームの一部を編集不可にする場合、データの読み込み中に操作可能な要素を一時的に制限する場合などが挙げられます。disabledプロパティは、ウェブアプリケーションにおけるユーザーインターフェースの操作フローを効果的に制御し、誤操作を防ぎ、ユーザーに安全で直感的な体験を提供するために不可欠な要素です。
構文(syntax)
1<button disabled>無効なボタン</button>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTMLのdisabled属性を切り替える
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Disabled属性の切り替えサンプル</title> 7</head> 8<body> 9 <!-- 初期状態で無効化されたテキスト入力フィールド --> 10 <input type="text" id="myInput" value="この入力欄は無効です" disabled> 11 12 <!-- disabled属性を切り替えるボタン --> 13 <button id="toggleButton">入力欄を有効/無効に切り替える</button> 14 15 <script> 16 // DOM要素（入力フィールドとボタン）を取得 17 const myInput = document.getElementById('myInput'); 18 const toggleButton = document.getElementById('toggleButton'); 19 20 // ボタンの初期テキストを設定 21 // input要素がdisabledであれば、「有効にする」を表示 22 if (myInput.disabled) { 23 toggleButton.textContent = '入力欄を有効にする'; 24 } else { 25 toggleButton.textContent = '入力欄を無効にする'; 26 } 27 28 // ボタンがクリックされた時の処理を設定 29 toggleButton.addEventListener('click', () => { 30 // input要素のdisabledプロパティの値を反転させる 31 // disabledがtrueならfalseに、falseならtrueになる 32 myInput.disabled = !myInput.disabled; 33 34 // ボタンのテキストを現在の状態に合わせて更新 35 if (myInput.disabled) { 36 toggleButton.textContent = '入力欄を有効にする'; 37 } else { 38 toggleButton.textContent = '入力欄を無効にする'; 39 } 40 }); 41 </script> 42</body> 43</html>
HTMLのdisabled属性は、Webページ上のフォーム要素（入力フィールド、ボタン、セレクトボックスなど）をユーザーが操作できない状態にするための属性です。この属性が指定された要素は非活性化され、ユーザーからの入力やクリックを受け付けなくなります。
disabled属性は、要素に付与するだけで機能するため、引数や戻り値は持ちません。属性が存在すれば無効、存在しなければ有効というシンプルな挙動をします。
提示されたサンプルコードでは、まずテキスト入力フィールド（<input type="text">）に初期状態でdisabled属性が指定されているため、Webページ表示時にはその入力欄は操作できない状態です。その下のボタンは、この入力欄の有効・無効を切り替える役割を持っています。
JavaScriptのコードでは、ボタンがクリックされるたびに、入力フィールドのdisabledプロパティの値を反転させています。具体的には、myInput.disabled = !myInput.disabled;という記述によって、もし入力欄が無効（disabledがtrue）であれば有効（false）に、有効であれば無効に切り替えています。これにより、ユーザーはボタン操作を通じて、入力欄を利用可能にしたり、再び利用不可にしたりと、動的に状態を制御できるようになります。この機能は、特定の条件が満たされるまで入力フォームをロックしたり、送信ボタンを一時的に無効にしたりするなど、ユーザーインターフェースの制御において非常に有用です。
disabled属性は、入力欄やボタンなどのフォーム要素を無効化し、ユーザーの操作を受け付けなくする際に使用します。HTMLでは要素にdisabledと記述するだけで機能し、JavaScriptではDOM要素の.disabledプロパティにtrueまたはfalseを設定することで、動的に有効/無効の状態を切り替えることができます。
サンプルコードのように、disabledの状態に合わせて関連するボタンのテキストを更新することは、ユーザーに現在の操作状況を明確に伝え、使いやすさを向上させる良いプラクティスです。
ただし、disabledはあくまでクライアントサイドでの制御であり、悪意のあるユーザーはブラウザの機能で容易に解除できてしまいます。そのため、セキュリティを確保する目的で利用する場合は、送信されたデータの妥当性を必ずサーバーサイドでも厳密に検証する必要があります。単に要素を画面から隠したい場合は、CSSのdisplay: none;などを検討してください。