HTML 属性：disabled

试一试

<form>
  <label for="name">Name:</label>
  <input id="name" name="name" type="text" />

  <label for="emp">Employed:</label>
  <select id="emp" name="emp" disabled>
    <option>No</option>
    <option>Yes</option>
  </select>

  <label for="empDate">Employment Date:</label>
  <input id="empDate" name="empDate" type="date" disabled />

  <label for="resume">Resume:</label>
  <input id="resume" name="resume" type="file" />
</form>

label {
  display: block;
  margin-top: 1em;
}

*:disabled {
  background-color: dimgrey;
  color: linen;
  opacity: 1;
}

概述

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

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

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

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

当支持的元素应用了 disabled 属性时，:disabled 伪类也适用于该元素。反之，支持 disabled 属性但未设置该属性的元素会匹配 :enabled 伪类。

此布尔值属性可阻止用户与按钮进行交互。如果未设置此属性，则按钮仍可能被其包含元素禁用，例如 <fieldset>；如果没有具有 disabled 属性的包含元素，则按钮是启用的。

与大多数浏览器不同，Firefox 会在页面加载后保留 <button> 的动态禁用状态。使用 autocomplete 属性来控制此功能。

属性交互

disabled 和 readonly 的区别在于，只读控件仍然可以工作并且仍然可以聚焦，而禁用控件无法获得焦点，不会随表单提交，并且通常在启用之前不作为控件起作用。

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

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

<fieldset>
  <legend>Checkboxes</legend>
  <p>
    <label>
      <input type="checkbox" name="ch-box" value="regular" /> Regular
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" name="ch-box" 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>

规范

规范
HTML # attr-fe-disabled
HTML # attr-optgroup-disabled
HTML # attr-option-disabled

:disabled 和 :enabled

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025年7月9日，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题

试一试

概述

属性交互

可用性

约束验证

示例

规范

浏览器兼容性

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

另见

帮助改进 MDN