disabled
HTML disabled Attribute （HTML禁用属性）
The HTML disabled attribute is a boolean attribute and specifies that the element must be disabled. （HTML禁用属性是布尔属性，指定必须禁用元素。）
This attribute can be used to prevent using the element until some condition has been met, such as selecting a checkbox. When present, the element does not respond to user actions and cannot be focused. Then, it is possible to make the element usable again, removing the disabled value by JavaScript. The disabled attribute is commonly grayed out. （此属性可用于防止在满足某些条件（例如选中复选框）之前使用元素。当存在时，元素不响应用户操作，无法聚焦。然后，可以使元素再次可用，通过JavaScript删除禁用的值。禁用属性通常呈灰色。）
You can use the disabled attribute on the following elements: <button>, <fieldset>, <input>, <optgroup>, <option>, <select>, and <textarea>.
When the disabled attribute is applied to an element, the :disabled pseudo-class also applies to it. The elements supporting the disabled attribute but not having the attribute set match the :enabled pseudo-class. （将disabled属性应用于元素时，: disabled伪类也适用于它。支持已禁用属性但未设置属性的元素与: enabled伪类匹配。）
Syntax
Syntax （语法）
<tag disabled></tag>
Example of the HTML disabled attribute used on the <button> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<button type="button">Button</button> <br><br>
<button type="button" disabled>Disabled button</button>
</body>
</html>
Example of the HTML disabled attribute used on the <fieldset> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 120px;
}
fieldset {
background: #e1eff2;
}
legend {
padding: 20px 0;
font-size: 22px;
}
</style>
</head>
<body>
<form>
<fieldset disabled>
<legend>Personal Information:</legend>
<div>
<label>First Name:</label>
<input type="text">
</div>
<div>
<label>Last Name:</label>
<input type="text">
</div>
<div>
<label>Date of birth:</label>
<input type="text">
</div>
</fieldset>
</form>
</body>
</html>
When a <fieldset> is disabled, all descendant form controls are also disabled except for the form controls within the <legend> element.
Example of the HTML disabled attribute used on the <input> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="#" method="get">
<input type="text" name="name" placeholder="Enter your name" />
<input type="number" name="Date of birth:" placeholder="Date of birth:" disabled/>
<input type="submit" value="Submit" />
</form>
</body>
</html>
Example of the HTML disabled attribute used on the <optgroup> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<optgroup label="Books" disabled>
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Snippets">
<option value="java">Java</option>
<option value="linux">Linux</option>
<option value="git">Git</option>
</optgroup>
</select>
</body>
</html>
Example of the HTML disabled attribute used on the <option> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select>
<option value="computers">Computer</option>
<option value="notebook">Notebook</option>
<option value="tablet" disabled>Tablet</option>
</select>
</form>
</body>
</html>
Example of the HTML disabled attribute used on the <select> element:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <form> <select disabled> <option value=“books”>Books</option> <option value=“html”>HTML</option> <option value=“css”>CSS</option> <option value=“php”>PHP</option> <option value=“js”>JavaScript</option> </select> </form> </body> </html>
Example of the HTML disabled attribute used on the <textarea> element:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <form> <textarea name=“comment” rows=“8” cols=“50” disabled>Send your comments to the author.</textarea> </form> </body> </html>