HTML 属性：disabled

当布尔属性 disabled 存在时，元素将不可变、不能聚焦或与表单一同提交。用户将不能在表单控件本身或其子控件进行编辑或聚焦操作。

尝试一下

总览

如果在表单控件上指定了 disabled 属性，则该元素及其子控件不参与约束验证。通常浏览器会将它们打灰处理，它不会收到任何浏览事件，如鼠标点击或与焦点相关的事件。

这些元素支持 disabled 属性：<button>、<fieldset>、<optgroup>、<option>、<select>、<textarea> 和 <input>。

这个布尔型 disabled 属性表示用户不能与该控件或其后代控件进行交互。如果没有指定这个属性，控件会从包含元素中继承其设置，例如 fieldset；如果没有设置 disabled 属性的包含元素，并且控件本身没有这个属性，那么该控件是启用的。如果在 <optgroup> 上声明，选择仍然是交互式的（除非另行禁用），但选项组中的项目都不能选择。

备注： 如果 <fieldset> 被禁用，那么除了 <legend> 内的表单控件外，其下级表单控件都被禁用。

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

这个布尔属性可以防止用户与按钮进行交互。如果没有设置这个属性，按钮仍然可以从一个包含元素中被禁用，例如 <fieldset>；如果没有设置 disabled 属性的包含元素，那么按钮就是启用的。

与其他浏览器不同的是，Firefox 会在不同的页面加载中持续保持 <button> 的动态禁用状态。使用 autocomplete 属性来控制这个特性。

属性交互

disabled 和 readonly 之间的区别是，只读控件仍然可以发挥作用，仍然可以聚焦，而禁用控件不能接受聚焦，也不随表单提交，通常在启用之前不能作为控件发挥作用。

因为不能改变一个禁用字段的值，所以 required 对同时指定 disabled 属性的输入没有任何影响。此外，由于元素变得不可改变，大多数其他属性，如 pattern，在控件被启用之前没有任何作用。

备注： required 属性不可在含有 disabled 属性的 input 元素上使用。

<fieldset>
  <legend>复选框</legend>
  <p>
    <label> <input type="checkbox" name="chbox" value="regular" /> 普通 </label>
  </p>
  <p>
    <label>
      <input type="checkbox" name="chbox" value="disabled" disabled /> 禁用
    </label>
  </p>
</fieldset>

<fieldset>
  <legend>单选按钮</legend>
  <p>
    <label> <input type="radio" name="radio" value="regular" /> 普通 </label>
  </p>
  <p>
    <label>
      <input type="radio" name="radio" value="disabled" disabled /> 禁用
    </label>
  </p>
</fieldset>

<p>
  <label
    >选择一个选项：
    <select>
      <optgroup label="第一组">
        <option>选项 1.1</option>
      </optgroup>
      <optgroup label="第二组">
        <option>选项 2.1</option>
        <option disabled>选项 2.2</option>
        <option>选项 2.3</option>
      </optgroup>
      <optgroup label="第三组" disabled>
        <option>禁用的 3.1</option>
        <option>禁用的 3.2</option>
        <option>禁用的 3.3</option>
      </optgroup>
    </select>
  </label>
</p>

<fieldset disabled>
  <legend>禁用的 fieldset</legend>
  <p>
    <label> 名字：<input type="name" name="radio" value="普通" /> </label>
  </p>
  <p>
    <label>数字：<input type="number" /></label>
  </p>
</fieldset>

规范

Specification
HTML Standard # attr-fe-disabled
HTML Standard # attr-optgroup-disabled
HTML Standard # attr-option-disabled

:disabled 和 :enabled

HTML 属性：disabled

尝试一下

总览

属性交互

可用性

约束验证

示例

规范

浏览器兼容性

html.elements.button.disabled

html.elements.fieldset.disabled

html.elements.input.disabled

html.elements.optgroup.disabled

html.elements.option.disabled

html.elements.select.disabled

html.elements.textarea.disabled

参见