只有原生表单控件支持disabled属性：input、textarea、select、button、optgroup、option、fieldset；div/span等非表单元素忽略该属性，label上使用无效；disabled是布尔属性，存在即禁用，js应使用el.disabled=true/false而非setattribute；readonly不可替代disabled，二者行为差异显著；fieldset disabled可批量禁用子控件，但子控件显式设disabled="false"仍无效。
哪些HTML标签能真正响应 disabled 属性
只有原生表单控件才支持 disabled 的语义禁用行为。浏览器会主动拦截聚焦、阻止事件、跳过表单序列化（如 FormData 或 form.submit()）。有效元素包括：input（所有 type）、textarea、select、button、optgroup、option 和 fieldset。
常见错误是给 div、span、p 或 label 加 disabled 属性——这些标签完全忽略它，既不灰化，也不阻止点击或键盘焦点。更隐蔽的坑是：<label disabled><input></label>，label 本身不支持该属性，关联的 input 依然可操作。
disabled 是布尔属性，不是字符串开关
disabled 的存在即生效，不存在即关闭。它不接受任何值来“开启”或“关闭”。写成 disabled="false"、disabled="" 或 disabled="disabled" 效果完全一样：都禁用。
正确做法是：
- 静态 HTML 中直接写
<input disabled>（推荐简写） - JS 动态控制必须用
el.disabled = true或el.disabled = false - 避免
el.setAttribute('disabled', 'false')——这只会加一个无效字符串属性，无法解除禁用
为什么不能用 readonly 替代 disabled
readonly 和 disabled 行为差异极大，混用会导致逻辑断裂：
-
readonly对select、checkbox、radio完全无效，浏览器直接忽略 -
readonly元素仍可被 Tab 聚焦、可复制内容、仍参与表单提交；disabled则全部阻断 - 用户可通过粘贴绕过
readonly输入框，但无法绕过disabled（除非删 DOM 属性） - 禁用后 JS 读取
input.value得到空字符串，而readonly下值保持不变
fieldset 的 disabled 是批量禁用最稳妥的方式
把一组控件包裹在 <fieldset disabled></fieldset> 中，能递归禁用所有子表单控件（包括嵌套的 fieldset），比逐个加 disabled 更简洁、语义更准。
但要注意两个硬限制：
- 子控件显式设
disabled="false"也无效——父级强制覆盖 -
legend文本不受影响，仍可聚焦、可读取；若需一并屏蔽，得额外加 CSS 或 JS 控制
真正麻烦的是：禁用状态不会自动移走焦点，Tab 键可能卡在已禁用元素上；服务端永远不能信任前端是否真的禁用了——它只是一层 UI 防护，权限和字段校验必须落在后端。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
