disabled属性是语义锁而非开关，仅对button、input、select、textarea、optgroup、option、output等原生表单控件生效；div、span、label等无效，且服务端必须校验。
disabled 属性不是开关按钮，而是语义锁——它只对原生表单控件生效，且一旦存在，就彻底切断交互链路和提交路径。想靠加个 class 或改 CSS 就“禁用”，行不通。
哪些元素能真正响应 disabled 属性
只有浏览器原生识别的可交互表单控件才支持：button、input（含 text、checkbox、radio、number、email 等所有类型）、select、textarea、optgroup、option、output。
常见误操作：
-
div、span、p、label加disabled属性完全无效——浏览器直接忽略，既不灰显，也不阻止点击 -
label本身不支持disabled；想禁用关联的input，必须操作那个input本身 - 自定义组件（如 Vue 的
<my-input></my-input>或 React 封装的Input）不会自动继承disabled，除非内部透传到原生节点
fieldset disabled 批量控制的边界条件
给 fieldset 加 disabled 是最省力的批量禁用方式，但它有明确的生效前提：
- 子控件必须是原生表单控件，且在 DOM 树中真实嵌套于该
fieldset内（不能靠position: absolute移出又视觉回归） -
legend中的控件**不受影响**——这是 HTML 规范行为，不是 bug；若需禁用 legend 里的input，得单独处理 - 若某个子控件已显式设置
disabled（哪怕值是""或"false"），它的禁用状态不会被外层fieldset覆盖或解除 - 避免给
fieldset设display: flex或grid：Safari 15.4 之前及部分旧版 IE 中，禁用样式可能丢失（但行为仍生效）
JavaScript 动态控制 disabled 的正确姿势
别用 setAttribute 和 removeAttribute 操作 disabled，它们语义模糊、读写不一致、兼容性差。
- ✅ 正确写法：
el.disabled = true或el.disabled = false（布尔值赋值） - ❌ 错误写法：
el.setAttribute('disabled', 'disabled')—— 后续el.disabled读出来仍是false（因为属性存在 ≠ 属性值为 true） - 动态插入的控件（如 Vue/React 渲染后），确保 DOM 已挂载再操作
.disabled，否则赋值无效 - 服务端渲染时若输出
disabled=""，多数现代浏览器会识别为 true，但为保 XHTML 兼容，建议显式写disabled="disabled"
disabled 和 readonly 别混用
二者视觉相似，但行为天差地别：
-
disabled：控件不可聚焦、不响应任何事件、值**不会提交**、对radio/checkbox有效 -
readonly：仅对input[type="text"]、input[type="email"]等文本类输入和textarea有效；用户不能编辑，但能聚焦、能复制、值**照常提交**；对radio/checkbox完全无效 - JS 中读取
disabled控件的.value，结果是空字符串（""），不是原始值；而readonly控件的.value保持不变
最易被忽略的一点：禁用状态下的可访问性。屏幕阅读器依赖 disabled 属性播报“已禁用”，但如果你用 pointer-events: none 或 opacity: 0.5 模拟禁用，它完全感知不到——这对残障用户是硬伤。真要禁用，就得用原生 disabled。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
