files/ja/web/api/htmlselectelement/disabled/index.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

---
title: HTMLSelectElement.disabled
slug: Web/API/HTMLSelectElement/disabled
tags:
  - API
  - HTML DOM
  - HTMLSelectElement
  - プロパティ
browser-compat: api.HTMLSelectElement.disabled
translation_of: Web/API/HTMLSelectElement/disabled
---
{{ APIRef("HTML DOM") }}

**`HTMLSelectElement.disabled`** は論理値で、HTML の [`disabled`](/ja/docs/Web/HTML/Element/select#attr-disabled) 属性を反映し、このコントロールが無効であるかどうかを示します。無効であった場合、クリックを受け付けません。無効な要素は使用できず、クリックできません。

## 構文

```js
aSelectElement.disabled = aBool;
```

<h2 id="Example">例</h2>

### 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
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);
```

### 結果

{{EmbedLiveSample('Example')}}

## 仕様書

{{Specifications}}

## ブラウザーの互換性

{{Compat}}