disabled控件的name和value完全不会进入FormData——这是HTML规范强制行为，非浏览器bug；应改用readonly+CSS锁定或隐藏域同步值，fieldset禁用仅对无显式disabled的直系子元素生效。
disabled 的控件值根本不会进 FormData
这是最常被误判的一点：只要某个 input、select 或 textarea 带有 disabled 属性，它的 name 和 value 就**完全不会出现在表单提交数据中**——无论你是用原生 submit、FormData 构造，还是 form.requestSubmit()。这不是浏览器 bug，是 HTML 规范强制行为。
常见错误现象：
- 前端禁用某个配置项（如地区下拉框），后端却收不到该字段，报“缺少必填参数”
- 用
new FormData(form)调试时，console.log([...fd])里压根没有那个字段 - 误以为
disabled="false"能“取消禁用”，其实只要属性存在（哪怕值是空或 false），浏览器就视为禁用
正确做法：
- 若业务要求“可见、不可改、但必须传值”，改用
readonly+ CSS 锁定交互（如pointer-events: none） - 若字段需动态禁用/启用且值必须稳定提交，用隐藏域同步维护：
<input type="hidden" name="city" value="beijing">，同时禁用对应可见控件 - 别在
fieldset[disabled]里混用readonly—— 它们的提交语义冲突，后端可能收到重复或缺失字段
fieldset disabled 不会覆盖子元素显式 disabled
fieldset 的 disabled 属性能批量禁用其直系子表单控件，但前提是这些子元素**没自己声明 disabled 属性**。一旦子元素写了 disabled="" 或 disabled="false"，浏览器优先采纳子元素状态，父级 fieldset 的禁用会被忽略。
立即学习“前端免费学习笔记（深入）”；
检查是否生效的最快方式：
- 打开开发者工具，选中目标
input，执行element.matches(':disabled')—— 返回true才算真禁用 - 如果
element.hasAttribute('disabled')是false但:disabled为true，说明禁用来自fieldset - 如果仍能
Tab进去，大概率是控件不在fieldset的 DOM 子树内（比如被div包裹又没设role="none"）
安全切换建议：
- JS 控制统一用
fieldset.disabled = true/false，别用setAttribute('disabled', '')或removeAttribute('disabled')—— Safari ≤ 15.6 和 IE ≤ 11 中 UI 可能不重绘 - 禁用前若有焦点在内部控件上，禁用后焦点不会自动移走，得手动调
nextFocusable.focus() - Vue/React 场景下，仅改 DOM 不够，必须同步更新组件 state，否则下次 re-render 会把
disabled属性刷掉
button[type="submit"] 禁用后，submit 事件可能不触发
给提交按钮加 disabled 后，它本身不会触发 click，也不会触发表单的 submit 事件。这意味着：如果你只监听 form.addEventListener('submit', ...) 并在里面写逻辑，而按钮又被提前禁用，整个流程就卡死了。
更隐蔽的问题：
-
form.submit()方法调用不会触发submit事件，绕过你的监听器 - 用户按回车键触发表单提交时，根本没点按钮，
click事件不触发 - 多个提交按钮（如“保存”“保存并新建”）只禁一个，另一个仍可点
可靠写法：
- 监听按钮
click事件，第一行设btn.disabled = true，再调form.requestSubmit()（推荐）或event.preventDefault(); fetch(...) - 批量禁用所有提交控件：
form.querySelectorAll('button[type="submit"], input[type="submit"]') - 别写
onsubmit="this.disabled=true"——this指的是form元素，不是按钮，会报错
移动端和旧浏览器的兼容性坑
Safari ≤ 15.6 和 IE 完全不支持 fieldset[disabled]；iOS Safari 在快速双击或 touchmove 后 click 时，disabled 状态可能延迟生效，导致“点了一次但按钮仍响应”。
兜底方案：
- 检测
if (!('disabled' in document.createElement('fieldset')))，不支持时降级为 JS 遍历子控件逐个设disabled - 移动端建议在
touchstart阶段就禁用按钮，并加style="pointer-events: none"双重防护 - fetch 提交时必须配
AbortController中止上一请求 —— 按钮禁用只拦 UI，挡不住并发 fetch - 服务端 token 校验通过后，必须立即作废（Redis DEL 或 unset session），否则前端禁用再严也没用
真正容易被忽略的是：禁用逻辑只做在前端，既挡不住刷新重发，也防不了抓包重放。所有关键操作都得配服务端一次性 token + 明确消费标记，disabled 只是第一道视觉防线。
