HTMLSelectElement.disabled

HTMLSelectElement.disabled は論理値で、HTML の disabled 属性を反映し、このコントロールが無効であるかどうかを示します。無効であった場合、クリックを受け付けません。無効な要素は使用できず、クリックできません。

構文

aSelectElement.disabled = aBool;

HTML

<label>
  飲み物はいかが?
  <input id="allow-drinks" type="checkbox"/>
</label>

<label for="drink-select">飲み物の選択:</label>
<select id="drink-select" disabled>
  <option value="1"></option>
  <option value="2">ビール</option>
  <option value="3">ペプシ</option>
  <option value="4">ウィスキー</option>
</select>

JavaScript

var allowDrinksCheckbox = document.getElementById("allow-drinks");
var drinkSelect = document.getElementById("drink-select");

allowDrinksCheckbox.addEventListener("change", function(event) {
  if (event.target.checked) {
    drinkSelect.disabled = false;
  } else {
    drinkSelect.disabled = true;
  }
}, false);

結果

仕様書

Specification
HTML Standard
# dom-fe-disabled

ブラウザーの互換性

BCD tables only load in the browser