HTML 属性：disabled

¥Overview

如果在表单控件上指定了 disabled 属性，则该元素及其表单控件后代不参与约束验证。通常，浏览器会将此类控件灰显，并且不会接收任何浏览事件，例如鼠标单击或与焦点相关的事件。

¥If the disabled attribute is specified on a form control, the element and its form control descendants do not participate in constraint validation. Often browsers grey out such controls and it won't receive any browsing events, like mouse clicks or focus-related ones.

<button>、<fieldset>、<optgroup>、<option>、<select>、<textarea> 和 <input> 支持 disabled 属性。

¥The disabled attribute is supported by <button>, <fieldset>, <optgroup>, <option>, <select>, <textarea> and <input>.

此布尔值禁用属性指示用户无法与该控件或其子控件进行交互。如果未指定此属性，则控件将从包含元素继承其设置，例如 fieldset；如果不存在设置了 disabled 属性的包含元素，并且控件本身没有该属性，则启用该控件。如果在 <optgroup> 上声明，则选择仍然是交互式的（除非以其他方式禁用），但选项组中的任何项目都不可选择。

¥This Boolean disabled attribute indicates that the user cannot interact with the control or its descendant controls. If this attribute is not specified, the control inherits its setting from the containing element, for example fieldset; if there is no containing element with the disabled attribute set, and the control itself does not have the attribute, then the control is enabled. If declared on an <optgroup>, the select is still interactive (unless otherwise disabled), but none of the items in the option group are selectable.

注意：如果禁用 <fieldset>，则所有后代表单控件都将被禁用，但 <legend> 中的表单控件除外。

¥Note: If a <fieldset> is disabled, the descendant form controls are all disabled, with the exception of form controls within the <legend>.

当支持元素应用了 disabled 属性时，:disabled 伪类也适用于它。相反，支持 disabled 属性但没有设置属性的元素与 :enabled 伪类匹配。

¥When a supporting element has the disabled attribute applied, the :disabled pseudo-class also applies to it. Conversely, elements that support the disabled attribute but don't have the attribute set match the :enabled pseudo-class.

此布尔属性可防止用户与按钮交互。如果未设置此属性，则仍可以从包含元素（例如 <fieldset>）禁用该按钮；如果不存在设置了 disabled 属性的包含元素，则启用该按钮。

¥This Boolean attribute prevents the user from interacting with the button. If this attribute isn't set, the button can still be disabled from a containing element, for example <fieldset>; if there is no containing element with the disabled attribute set, then the button is enabled.

与其他浏览器不同，Firefox 将在页面加载时保持 <button> 的动态禁用状态。使用 autocomplete 属性来控制此功能。

¥Firefox will, unlike other browsers, persist the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.

¥Attribute interactions

disabled 和 readonly 之间的区别在于，只读控件仍然可以运行并且仍然可以获得焦点，而禁用的控件无法接收焦点并且不会随表单一起提交，并且在启用之前通常不会充当控件。

¥The difference between disabled and readonly is that read-only controls can still function and are still focusable, whereas disabled controls can not receive focus and are not submitted with the form and generally do not function as controls until they are enabled.

由于禁用字段无法更改其值，因此 required 对同时指定了 disabled 属性的输入没有任何影响。此外，由于元素变得不可变，因此大多数其他属性（例如 pattern）在启用控件之前不起作用。

¥Because a disabled field cannot have its value changed, required does not have any effect on inputs with the disabled attribute also specified. Additionally, since the elements become immutable, most other attributes, such as pattern, have no effect, until the control is enabled.

注意：指定了 disabled 属性的输入上不允许使用 required 属性。

¥Note: The required attribute is not permitted on inputs with the disabled attribute specified.

¥Usability

浏览器将禁用的表单控件显示为灰色，因为禁用的表单控件是不可变的，不会接收焦点或任何浏览事件，例如鼠标单击或与焦点相关的事件，并且不会随表单一起提交。

¥Browsers display disabled form controls greyed as disabled form controls are immutable, won't receive focus or any browsing events, like mouse clicks or focus-related ones, and aren't submitted with the form.

如果存在于支持元素上，则 :disabled 伪类将匹配。如果不包含该属性，则 :enabled 伪类将匹配。如果元素不支持 disabled 属性，则该属性将不起作用，包括不会导致被 :disabled 和 :enabled 伪类匹配。

¥If present on a supporting elements, the :disabled pseudo class will match. If the attribute is not included, the :enabled pseudo class will match. If the element doesn't support the disabled attribute, the attribute will have no effect, including not leading to being matched by the :disabled and :enabled pseudo classes.

¥Constraint validation

如果元素是 disabled，那么该元素的值无法获得焦点，无法被用户更新，并且不参与约束验证。

¥If the element is disabled, then the element's value can not receive focus and cannot be updated by the user, and does not participate in constraint validation.

¥Examples

当表单控件被禁用时，许多浏览器默认会以较浅的灰色显示它们。以下是禁用的复选框、单选按钮、<option> 和 <optgroup> 以及通过祖级 <fieldset> 元素上设置的禁用属性禁用的一些表单控件的示例。<option> 已禁用，但 <select> 本身未禁用。我们可以通过将属性添加到该元素而不是其后代来禁用整个 <select>。

¥When form controls are disabled, many browsers will display them in a lighter, greyed-out color by default. Here are examples of a disabled checkbox, radio button, <option> and <optgroup>, as well as some form controls that are disabled via the disabled attribute set on the ancestor <fieldset> element. The <option>s are disabled, but the <select> itself is not. We could have disable the entire <select> by adding the attribute to that element rather than its descendants.

<fieldset>
  <legend>Checkboxes</legend>
  <p>
    <label>
      <input type="checkbox" name="chbox" value="regular" /> Regular
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" name="chbox" value="disabled" disabled /> disabled
    </label>
  </p>
</fieldset>

<fieldset>
  <legend>Radio buttons</legend>
  <p>
    <label> <input type="radio" name="radio" value="regular" /> Regular </label>
  </p>
  <p>
    <label>
      <input type="radio" name="radio" value="disabled" disabled /> disabled
    </label>
  </p>
</fieldset>

<p>
  <label
    >Select an option:
    <select>
      <optgroup label="Group 1">
        <option>Option 1.1</option>
      </optgroup>
      <optgroup label="Group 2">
        <option>Option 2.1</option>
        <option disabled>Option 2.2</option>
        <option>Option 2.3</option>
      </optgroup>
      <optgroup label="Group 3" disabled>
        <option>Disabled 3.1</option>
        <option>Disabled 3.2</option>
        <option>Disabled 3.3</option>
      </optgroup>
    </select>
  </label>
</p>

<fieldset disabled>
  <legend>Disabled fieldset</legend>
  <p>
    <label>
      Name: <input type="radio" name="radio" value="regular" /> Regular
    </label>
  </p>
  <p>
    <label>Number: <input type="number" /></label>
  </p>
</fieldset>

¥Browser compatibility

¥See also

• :disabled 和 :enabled