唯一推荐的 JS 控制方式是直接赋值布尔值 button.disabled = true/false；禁用时设为 true，启用时设为 false 或 removeAttribute；避免使用字符串赋值或 setAttribute，且需确保 DOM 加载完成后再操作。
button.disabled = true/false 是唯一推荐的 JS 控制方式
直接赋值布尔值，不是字符串，也不是 removeAttribute。写 btn.disabled = "false" 或 btn.setAttribute("disabled", "false") 会让按钮持续禁用——因为只要 disabled 属性存在于 DOM 中（哪怕值是 "false"），浏览器就认为它被禁用了。
正确做法只有两种，效果等价，但前者更简洁安全：
-
btn.disabled = true→ 禁用 -
btn.disabled = false→ 启用 -
btn.removeAttribute("disabled")→ 可行，但多一步 DOM 操作，不必要
别碰 btn.setAttribute("disabled", "") 这类写法，语义不清，易出错。
DOM 加载完成前操作会报 Cannot set property 'disabled' of null
如果脚本在 <button> 标签之前执行，document.getElementById() 返回 null，后续赋值直接崩溃。
立即学习“前端免费学习笔记（深入）”；
稳妥解法只有两个：
- 把
<script>放在</body>前（最简单） - 用
DOMContentLoaded包裹逻辑：document.addEventListener("DOMContentLoaded", () => {<br> const btn = document.getElementById("myBtn");<br> btn.disabled = false;<br>});
别在 <head> 里写内联脚本直接操作未生成的按钮。
React/Vue 里别绕过框架直接操作 disabled 属性
原生 JS 赋值 btn.disabled = false 会破坏 React 的虚拟 DOM 同步，导致 UI 和状态不一致；Vue 的响应式系统也完全感知不到这种手动修改。
必须走框架的数据流：
- React：用
useState控制disabledprop，比如<button disabled={isSubmitting}>，再调setIsSubmitting(false) - Vue：绑定
:disabled="isProcessing"，然后改isProcessing数据
混用场景下，优先更新 state，而不是查 DOM 再赋值。
表单提交瞬间 disabled=true 就不会发数据，和 JS 设置时机强相关
HTML 规范规定：只要提交那一刻按钮的 disabled 属性为 true（或存在），它的 name/value 就不会出现在表单数据中——哪怕你前 1ms 刚设成 false，只要没来得及触发 submit，照样丢。
防重复提交的正确节奏是：
- 在
form.submit事件里设btn.disabled = true - 异步请求结束后，在
finally块里恢复btn.disabled = false - React/Vue 中还要加卸载判断，避免组件销毁后更新已不存在的 state
视觉上“变灰”只是副作用，真正关键的是这个属性是否真实存在于 DOM 并影响表单行为——这点容易被忽略，但决定了后端能不能收到点击意图。
