HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Selectのdisabledプロパティとは？取得・変更方法をサンプルコード付きで解説

HTML DOM の Select disabled プロパティは、HTML ドキュメント内のドロップダウンリスト（<select> 要素）が無効化されているかどうかを取得し、さらにその状態を変更することもできるプロパティです。

構文

disabled プロパティの基本的な構文は以下のとおりです。

値を取得する場合

object.disabled

値を変更する場合

object.disabled = true | false

戻り値はブール値（真偽値）です。true の場合はドロップダウンリストが無効（ユーザーが選択できない状態）を、false の場合は有効（操作可能な状態）を意味します。

サンプルコード

それでは、ボタンをクリックするたびにドロップダウンリストの有効／無効を切り替える具体的な例を見てみましょう。

<!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 Select disabled Demo</h1>
<p>Hi, Select your favourite subject:</p>
<select class='drop-down'>
<option>Physics</option>
<option>Maths</option>
<option>Chemistry</option>
<option>English</option>
</select>
<button onclick="disEna()" class="btn">Disable/Enable</button>
<div class="show"></div>
<script>
   function disEna() {
       // ドロップダウンリストとメッセージ表示用の要素を取得
       var dropDown = document.querySelector(".drop-down");
       var showMsg = document.querySelector(".show");
       showMsg.innerHTML ="";
       // 現在の状態に応じて有効／無効を切り替える
       if (dropDown.disabled === true){
           dropDown.disabled = false;
           showMsg.innerHTML ="Previously, I was disabled but now I am enabled";
       }else{
           dropDown.disabled = true;
           showMsg.innerHTML ="Previously, I was enabled but now I am disabled";
       }
   }
</script>
</body>
</html>

このコードでは、document.querySelector() でドロップダウンリストを取得し、disabled プロパティの現在の値を条件分岐で判定しています。true なら false に、false なら true に切り替えることで、ボタンを押すたびに状態がトグルされる仕組みです。

実行結果

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

HTML DOM Selectのdisabledプロパティとは？取得・変更方法をサンプルコード付きで解説

「Disable/Enable」ボタンをクリックすると、ドロップダウンリストの無効化／有効化が切り替わります。最初のクリックではリストが無効化され、状態を示すメッセージが表示されます。

HTML DOM Selectのdisabledプロパティとは？取得・変更方法をサンプルコード付きで解説

もう一度ボタンをクリックすると、リストは再び有効になり、選択できるようになります。

HTML DOM Selectのdisabledプロパティとは？取得・変更方法をサンプルコード付きで解説

まとめ

disabled プロパティを使えば、JavaScript からセレクトボックスの操作可否を簡単に制御できます。フォームの入力制限や、他の項目の選択内容に応じた入力欄の切り替えなど、実務でもよく使われるテクニックなので、ぜひマスターしておきましょう。

  1. 【HTML DOM】fieldset要素のdisabledプロパティの使い方とサンプルコード

    fieldsetのdisabledプロパティとはHTML DOMのfieldset要素が持つdisabledプロパティは、そのfieldset内に含まれるフォーム部品をまとめて無効化するためのプロパティです。trueを設定すれば配下の要素がすべて無効になり、falseを設定すれば有効になります（初期状態は有効）。無効化された要素は多くのブラウザでグレー表示となり、ユーザーはクリックや文字入力を行えません。基本構文disabledプロパティに値を設定する場合は次のように記述します。fieldsetObj.disabled = true|false現在の設定値を取得する場合は以下のとおりです。fi

  2. HTML DOM Textarea disabledプロパティの使い方とサンプルコード

    HTML DOM の Textarea disabled プロパティは、HTML ドキュメント内の textarea 要素が無効（disabled）状態かどうかを取得したり、設定したりするためのプロパティです。ユーザーの操作状況に応じてフォームの入力欄を一時的に使用不可にしたい場合などに活用できます。 構文 disabled プロパティの基本的な構文は以下の通りです。 1. disabled の値を取得する場合 object.disabled 2. disabled の値を設定する場合 object.disabled = true | false true を指定するとテキストエリアが無効化さ