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