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></button> - ❌ 错误写法：
<input disabled>——照样禁用；<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 就会覆盖你的设置。
