HTMLSelectElement: disabled プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

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

値

論理値です。

例

HTML

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

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

allowDrinksCheckbox.addEventListener(
  "change",
  (event) => {
    drinkSelect.disabled = !event.target.checked;
  },
  false,
);