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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
|
---
title: ':disabled'
slug: 'Web/CSS/:disabled'
translation_of: 'Web/CSS/:disabled'
---
<p>{{ CSSRef() }}</p>
<p><code>:disabled</code> CSS <a href="/zh-CN/CSS/Pseudo-classes" title="Pseudo-classes">伪类</a>表示任何被禁用的元素。如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。元素还有一个启用状态（enabled state），在启用状态下，元素可以被激活或获取焦点。</p>
<p> </p>
<pre class="brush: css no-line-numbers">/* Selects any disabled <input> */
input:disabled {
background: #ccc;
}</pre>
<p> </p>
<h2 id="语法">语法</h2>
{{csssyntax}}
<h2 id="示例">示例</h2>
<p>这个例子显示基本的购物表单。通过使用 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">JavaScript</a> {{event("change")}} 事件让用户启用/禁用付款字段。</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><form action="#">
<fieldset id="shipping">
<legend>Shipping address</legend>
<input type="text" placeholder="Name">
<input type="text" placeholder="Address">
<input type="text" placeholder="Zip Code">
</fieldset>
<br>
<fieldset id="billing">
<legend>Billing address</legend>
<label for="billing_is_shipping">Same as shipping address:</label>
<input type="checkbox" id="billing-checkbox" checked>
<br>
<input type="text" placeholder="Name" disabled>
<input type="text" placeholder="Address" disabled>
<input type="text" placeholder="Zip Code" disabled>
</fieldset>
</form></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">input[type="text"]:disabled {
background: #ccc;
}</pre>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js">// Wait for the page to finish loading
document.addEventListener('DOMContentLoaded', function () {
// Attach `change` event listener to checkbox
document.getElementById('billing-checkbox').onchange = toggleBilling;
}, false);
function toggleBilling() {
// Select the billing text fields
var billingItems = document.querySelectorAll('#billing input[type="text"]');
// Toggle the billing text fields
for (var i = 0; i < billingItems.length; i++) {
billingItems[i].disabled = !billingItems[i].disabled;
}
}</pre>
<h3 id="结果">结果</h3>
<p>{{EmbedLiveSample('示例', 300, 250)}}</p>
<p> </p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('HTML WHATWG', '#selector-disabled', ':disabled') }}</td>
<td>{{ Spec2('HTML WHATWG') }}</td>
<td>No change.</td>
</tr>
<tr>
<td>{{ SpecName('HTML5 W3C', '#selector-disabled', ':disabled') }}</td>
<td>{{ Spec2('HTML5 W3C') }}</td>
<td>Defines the semantic regarding HTML and forms.</td>
</tr>
<tr>
<td>{{ SpecName('CSS4 Selectors', '#enableddisabled', ':disabled') }}</td>
<td>{{ Spec2('CSS4 Selectors') }}</td>
<td>No change.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 UI', '#pseudo-classes', ':disabled') }}</td>
<td>{{ Spec2('CSS3 UI') }}</td>
<td>Link to Selectors Level 3.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Selectors', '#enableddisabled', ':disabled') }}</td>
<td>{{ Spec2('CSS3 Selectors') }}</td>
<td>Defines the pseudo-class, but not the associated semantic.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>{{ CompatGeckoDesktop("1") }}</td>
<td>9.0</td>
<td>9.0</td>
<td>3.1</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>2.1</td>
<td>{{ CompatGeckoMobile("1") }}</td>
<td>9.0</td>
<td>9.5</td>
<td>3.1</td>
</tr>
</tbody>
</table>
</div>
<h2 id="相关链接">相关链接</h2>
<ul>
<li>
<p>{{ Cssxref(":enabled") }}</p>
</li>
</ul>
|
