HTML DOM の option disabled プロパティの使い方を徹底解説

HTML DOM の option disabled プロパティは、<option> 要素が無効化（disabled）されているかどうかを取得し、その状態を変更するために使用されます。このプロパティを活用することで、ユーザーの操作に応じてドロップダウンリストの特定の選択肢を選択不可にするなど、動的なフォーム制御が実現できます。

構文

option disabled プロパティの構文は以下のとおりです。

1. disabled の値を取得する場合

object.disabled

2. disabled の値を設定する場合

object.disabled = true | false

true を設定するとその選択肢は無効化され、false を設定すると再度選択可能になります。

サンプルコード

以下に、HTML DOM option disabled プロパティの具体的な使用例を示します。この例では、ボタンをクリックするとドロップダウンリスト内の「Maths（数学）」という選択肢が無効化されます。

<!DOCTYPE html>
<html>
<head>
<style>
   html{
      height:100%;
   }
   body{
      text-align:center;
      color:#fff;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
      height:100%;
   }
   p{
      font-weight:700;
      font-size:1.2rem;
   }
   .drop-down{
      width:35%;
      border:2px solid #fff;
      font-weight:bold;
      padding:8px;
   }
   .btn{
      background:#0197F6;
      border:none;
      height:2rem;
      border-radius:2px;
      width:35%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
   .show{
      font-size:1.5rem;
      font-weight:bold;
   }
</style>
</head>
<body>
<h1>DOM Option disabled Demo</h1>
<p>Hi, Select your favourite subject:</p>
<select class='drop-down' name="Drop Down List">
<option>Physics</option>
<option>Maths</option>
<option>Chemistry</option>
<option>English</option>
</select>
<button onclick="disMaths()" class="btn">Disable Maths</button>
<div class="show"></div>
<script>
   function disMaths() {
      document.querySelector(".drop-down").options[1].disabled=true;
      document.querySelector(".show").innerHTML="Now you can't select Maths subject";
   }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、以下のような画面が表示されます。

HTML DOM の option disabled プロパティの使い方を徹底解説

「Disable Maths」ボタンをクリックすると、「Maths（数学）」の選択肢が無効化されます。その後、ドロップダウンリストで「Maths」を選択しようとしても、グレーアウトされて選択できなくなっていることが確認できます。

HTML DOM の option disabled プロパティの使い方を徹底解説

ポイントまとめ

object.disabled で、該当する option 要素が無効かどうかを真偽値（true / false）として取得できます。
object.disabled = true とすることで、JavaScript から動的に選択肢を無効化できます。
options[インデックス] を使うことで、select 要素内の任意の option 要素にアクセス可能です（インデックスは 0 から始まります）。
在庫切れの商品や選択できない条件の選択肢を表示しつつ選択不可にするなど、実務的なフォーム UI で幅広く活用できます。

HTML DOMのOptionインデックスプロパティとは？取得・変更方法を実例で解説

HTML DOM Optionオブジェクトとは？作成方法から主要プロパティまで解説

【HTML DOM】fieldset要素のdisabledプロパティの使い方とサンプルコード
fieldsetのdisabledプロパティとはHTML DOMのfieldset要素が持つdisabledプロパティは、そのfieldset内に含まれるフォーム部品をまとめて無効化するためのプロパティです。trueを設定すれば配下の要素がすべて無効になり、falseを設定すれば有効になります（初期状態は有効）。無効化された要素は多くのブラウザでグレー表示となり、ユーザーはクリックや文字入力を行えません。基本構文disabledプロパティに値を設定する場合は次のように記述します。fieldsetObj.disabled = true|false現在の設定値を取得する場合は以下のとおりです。fi
HTML DOM Textarea disabledプロパティの使い方とサンプルコード
HTML DOM の Textarea disabled プロパティは、HTML ドキュメント内の textarea 要素が無効（disabled）状態かどうかを取得したり、設定したりするためのプロパティです。ユーザーの操作状況に応じてフォームの入力欄を一時的に使用不可にしたい場合などに活用できます。構文 disabled プロパティの基本的な構文は以下の通りです。 1. disabled の値を取得する場合 object.disabled 2. disabled の値を設定する場合 object.disabled = true | false true を指定するとテキストエリアが無効化さ