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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
---
title: ':disabled'
slug: 'Web/CSS/:disabled'
tags:
- CSS
- Layout
- Pseudo-class
- Reference
- Selector
- Web
translation_of: 'Web/CSS/:disabled'
---
<div>{{CSSRef}}</div>
<p><strong><code>:disabled</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、無効な要素を表します。無効な要素とは、アクティブ化（選択、クリック、入力など）したりフォーカスを得たりすることができないものです。要素には有効な状態、つまりアクティブ化したりフォーカスを得たりすることができる状態もあります。</p>
<pre class="brush: css no-line-numbers notranslate">/* 無効な <input> を選択 */
input:disabled {
background: #ccc;
}</pre>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="Examples" name="Examples">例</h2>
<p>この例は基本的な送り先フォームを表示します。 <a href="/ja/docs/Web/JavaScript">JavaScript</a> の {{event("change")}} イベントを使用して、ユーザーが請求先欄を有効化／無効化できるようにします。</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><form action="#">
<fieldset id="shipping">
<legend>送り先</legend>
<input type="text" placeholder="名前">
<input type="text" placeholder="住所">
<input type="text" placeholder="郵便番号">
</fieldset>
<br>
<fieldset id="billing">
<legend>請求先</legend>
<label for="billing_is_shipping">送り先と同じ:</label>
<input type="checkbox" id="billing-checkbox" checked>
<br>
<input type="text" placeholder="名前" disabled>
<input type="text" placeholder="住所" disabled>
<input type="text" placeholder="郵便番号" disabled>
</fieldset>
</form>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css notranslate">input[type="text"]:disabled {
background: #ccc;
}
</pre>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js notranslate">// ページの読み込みの終了を待つ
document.addEventListener('DOMContentLoaded', function () {
// チェックボックスに 'change' イベントリスナーを追加
document.getElementById('billing-checkbox').onchange = toggleBilling;
}, false);
function toggleBilling() {
// 請求先のテキストフィールドを選択
var billingItems = document.querySelectorAll('#billing input[type="text"]');
// 請求先テキストフィールドを切り替え
for (var i = 0; i < billingItems.length; i++) {
billingItems[i].disabled = !billingItems[i].disabled;
}
}
</pre>
<h3 id="Result" name="Result">結果</h3>
<p>{{EmbedLiveSample('Examples', 300, 250)}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>変更なし。</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>HTML に関する意味を定義。</td>
</tr>
<tr>
<td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>変更なし。</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}</td>
<td>{{Spec2('CSS3 Selectors')}}</td>
<td>擬似クラスを定義、但し意味の結びつけの定義はなし</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div>
<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
<p>{{Compat("css.selectors.disabled")}}</p>
</div>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>
<p>{{Cssxref(":enabled")}}</p>
</li>
</ul>
|
