先看這個例子
第一個 input 故意把布林屬性錯寫成 disabled="false"。瀏覽器仍會當作 disabled 已出現。第二個 input 沒有 disabled,可供輸入。這是修正錯例的教學,不是建議用這種寫法輸出布林值。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 有屬性,文字為 false | 查 frozen.hasAttribute("disabled") | 為 true;frozen.disabled=true;實際停用 |
| 沒有屬性 | 查 editable.hasAttribute("disabled") | 為 false;editable.disabled=false;可輸入 |
| 修正 | 移除 frozen 的 disabled | 自己的 disabled 屬性值變成 false |
瀏覽器怎樣處理
HTML 布林屬性出現就是 true,不出現才是 false。正確寫法可用空值或該屬性的名稱,不是文字 true、false。範本旗標為 false 時,不要輸出 disabled="false",而是完全省略 disabled。本例沒有停用的上層欄位組,所以移除後亦會實際啟用。
值留空,布林屬性仍然算已出現
把 false 改成空字串,並未移除屬性。這種布林屬性寫法本身正確,但意思仍是停用。
<label>示範 <input id="frozen" type="text" disabled="" value="A"></label>hasAttribute("disabled") 仍是 true,disabled 也是 true。成功修正要刪屬性,不只是改它的文字值。
試着修正
範本旗標為 false,HTML 應輸出 disabled="false"、disabled="",還是不輸出 disabled?
查看參考答案
不輸出 disabled。其餘兩種寫法都保留屬性,本例欄位仍會停用。
- 修正後核對 hasAttribute 及實際操作。
- 推定可用狀態時,另外查上層 fieldset。