disabled属性是唯一真正禁用表单控件的方式，仅对input、textarea、select、option、optgroup、button、fieldset等原生表单控件生效；对div、span、label等无效；它是布尔属性，存在即禁用，JS须用element.disabled=true/false控制，服务端必须校验。

直接加 disabled 属性是唯一能真正禁用表单控件的方式——它让元素无法聚焦、不响应点击/回车、不触发 input 或 change 事件，且值绝不会出现在 FormData 或表单提交中。

哪些元素加 disabled 才真正生效

只有原生可交互表单控件才识别该属性：

• input（含 type="text"、"checkbox"、"radio"、"submit" 等所有类型）
• textarea
• select 和其子元素 option、optgroup
• button
• fieldset（会递归禁用所有子控件）

给 div、span、label、p 加 disabled 属性完全无效——浏览器直接忽略，既不灰化，也不阻止点击或 Tab 聚焦。常见错误：<label disabled><input></label>，label 自身不响应 disabled，里面的 input 依然可操作。

disabled 是布尔属性，不是字符串开关

它的语义很简单：存在即禁用，不存在即启用。没有中间态，也不接受值解析。

• ✅ 正确写法：<input disabled>、<button disabled>
• ❌ 错误写法：<input disabled="false">——照样禁用；<input disabled="">——也禁用
• ❌ JS 里错用：el.setAttribute('disabled', 'false') 不解除禁用，只是加了个无意义的字符串属性

动态控制必须走 DOM 属性：el.disabled = true 或 el.disabled = false。这是唯一稳定、可读、跨浏览器一致的方式。

为什么不能用 pointer-events: none 或 opacity 替代

这些 CSS 方式只改视觉，不改行为：

• pointer-events: none 挡不住键盘操作：Tab 键仍能聚焦，回车仍可能触发表单提交
• opacity: 0.5 或 visibility: hidden 完全不影响表单序列化——值照常提交，后端照样收到
• 屏幕阅读器仍会把这类“伪禁用”元素当作可操作项播报，破坏可访问性

真正禁用，必须靠 disabled 原生语义。CSS 只能用来微调禁用后的样式（比如改灰度、光标），不能替代它。

容易被忽略的关键点

禁用后行为不是“静默结束”，而是有一连串隐性影响：

• 焦点不会自动移走，用户按 Tab 可能卡在已禁用元素上；应手动 nextElement.focus()
• 如果该控件之前有 required，禁用后 HTML5 验证跳过，但 checkValidity() 的缓存状态可能残留；建议禁用后调一次 reportValidity()
• fieldset disabled 会强制覆盖子控件的显式 disabled="false"——子控件无法单独恢复
• 服务端永远别信前端禁用了什么；绕过只需删掉属性或直接发 POST 请求；权限和字段校验必须落在后端

最麻烦的是混用框架响应式状态和手动 DOM 操作：Vue/React 中只改 el.disabled，不更新 data 或 state，下次 re-render 就会覆盖你的设置。