fieldset disabled能批量禁用，但仅对input、select、textarea、button、output等原生表单控件生效，禁用后值不提交；legend内控件、contenteditable元素、自定义组件及显式设disabled的子元素均不受影响。
能批量禁用，但只对原生表单控件生效，且禁用后值不提交——别指望它实现“只读”或覆盖自定义组件。
fieldset disabled 真正禁用哪些元素
它只影响浏览器原生可交互、可提交的表单控件：input、select、textarea、button、output。其他统统无效：
-
legend里的文字或控件（比如<legend> <input type="checkbox">同意</legend>）始终可操作，这是 HTML 规范强制行为 -
contenteditable="true"的div或span不受影响，键盘仍可编辑 - Vue/React 封装的
<myinput></myinput>、<customselect></customselect>等自定义组件，若未透传disabled到底层input，就完全“逃逸”禁用 -
label、div、span这类非表单元素，既不灰显也不拦截点击
为什么加了 disabled 却还有 input 能点、能提交
不是属性没起作用，而是被更高优先级逻辑覆盖或结构异常绕过：
- 子
input显式写了disabled="false"或disabled=""—— 浏览器以子元素显式声明为准，fieldset无法强制覆盖 -
label的for指向了fieldset外的input，点击 label 实际激活的是外部控件 - 用了
display: contents或绝对定位脱离文档流，导致 DOM 子树关系断裂，继承失效 - JavaScript 直接调用
el.click()或el.focus()，禁用只拦原生交互，不拦 JS 执行 - 表单提交时发现字段缺失：因为
fieldset[disabled]下所有控件的值默认不参与序列化（和单个input disabled行为一致）
动态控制该用 .disabled = true 还是 setAttribute
必须用赋值方式，避免兼容性断裂：
- ✅ 推荐：
document.querySelector('fieldset').disabled = true—— 所有现代浏览器（含 Safari ≤15.6）行为一致，立即触发状态同步与样式重绘 - ❌ 避免：
el.setAttribute('disabled', '')—— 在旧 Safari 和 IE 中可能不重绘，控件看起来灰显但实际可交互 - ❌ 错误：
el.disabled = null或undefined—— 不清除禁用状态，只认布尔值 - 服务端渲染建议写
disabled="disabled"，比disabled=""更稳妥（XHTML 兼容）
禁用后值不提交，但业务需要保留数据怎么办
这是最常被忽略的致命点：禁用 ≠ 只读。如果后端依赖某个字段值，而你把它包进 fieldset disabled，那这个字段根本不会出现在 FormData 或 form.elements 提交结果里。
- 要“内容可见 + 可复制 + 值必提交”，就得用
readonly（仅对input/textarea有效），再配 CSS 拦指针：pointer-events: none -
select不支持readonly，只能换方案：禁用select+ 用output或div显示当前选中值 - 千万别混用
disabled和readonly在同一表单里——提交行为不一致，调试时极易漏掉某个字段没传值 - 键盘 Tab 顺序是否跳过整个区域、读屏软件能否正确播报分组意图，这些无障碍细节比视觉灰显更重要
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
