跳至內容
Astera Technology

整組停用時,為何第一個圖例的欄位仍可用?

input 自己沒有 disabled,仍可能受整組停用影響;第一個 legend 內的例外要另外看。

第一個圖例內的勾選框仍可用,圖例外的文字欄則實際停用。

下載完整個案資料及參考答案 ↓

先看這個例子

本例 fieldset 已停用。第一個 legend 內有勾選框,文字欄則在 legend 外。勾選框只示範原生狀態;剔選後不會啟用文字欄,也不會執行其他動作。

輸入與瀏覽器原生結果
情況輸入或查看方法結果與意思
圖例內的子元素查 legend-check 是否符合 :enabled符合;可剔選及取消
圖例外的控制項查 note 是否符合 :disabled符合;受到 fieldset 停用狀態影響
自己的屬性讀取 note.disabled為 false,因為 input 本身沒有 disabled 屬性
下載可編輯 CSV ↓

瀏覽器怎樣處理

停用 fieldset 會影響相關子控制項,但第一個 legend 內的子元素除外。input.disabled 反映 input 自己有沒有該屬性;:disabled 則核對實際停用狀態,包括本例的沿用影響。不能只看自己的屬性就推定可否輸入。

第二個 legend 不享有第一個的例外

反例先保留第一個 legend,再把勾選框放到第二個 legend。停用 fieldset 的例外只針對第一個 legend 內的子元素。

反例原始碼,請另開例子核對
<fieldset disabled><legend>第一個圖例</legend><legend><label><input id="legend-check" type="checkbox">第二個圖例內的勾選框</label></legend><label>示範筆記 <input id="note" value="固定示範"></label></fieldset>

勾選框現在符合 :disabled,使用者不能剔選。這個額外圖例的錯例用來看清「第一個」的邊界;正式 fieldset 應只用一個 legend。

試着修正

文字 input 自己的 disabled 是 false,足以證明本例可輸入嗎?

查看參考答案

不足夠。它在已停用 fieldset 內,而且不屬第一個 legend。須查 :disabled 及實際操作;本例實際停用。

  • 自己的屬性和值,與實際選擇器狀態分開記。
  • 剔選圖例內的勾選框後,文字欄仍須停用。

原始例子檔案

相關資源