button.disabled = true 是最可靠禁用方式；disabled 是布尔属性，设 true 即禁用、false 即启用，禁用后按钮变灰、不可点击、不提交值，且必须在 submit 事件中设置并 finally 恢复。
如何用 JavaScript 正确设置 disabled 属性
直接赋值 button.disabled = true 是最可靠的方式，比操作 setAttribute('disabled', '') 更稳妥——后者在某些旧版 IE 中可能不触发 UI 禁用，且容易因大小写或空字符串处理出错。
关键点：
-
disabled是布尔属性，设为true即禁用，false即恢复，不要用字符串'true'或'false' - 禁用后按钮默认变灰、不可点击、不触发表单提交，但它的值仍保留在 DOM 中（不影响后续 JS 读取）
- 若按钮是通过
document.querySelector获取的，确保执行时节点已存在，否则会报Cannot set property 'disabled' of null
表单提交时自动禁用按钮防重复提交
这是最常见的使用场景。重点不是“禁用”，而是“禁用时机”和“是否可恢复”。
典型错误是只在 click 事件里禁用，但用户可能回车提交、或调用 form.submit() 绕过按钮；正确做法是监听 submit 事件：
立即学习“前端免费学习笔记（深入）”；
form.addEventListener('submit', function(e) {
const btn = this.querySelector('button[type="submit"]');
btn.disabled = true;
// 后续通常配合 fetch 或 submit()，成功/失败后再恢复
});
注意：
- 必须在
e.preventDefault()前或后立即设disabled，否则极端情况下仍有极短窗口期可重复点击 - 如果用
fetch提交，记得在finally块中恢复btn.disabled = false，否则失败后按钮永远卡死 - 服务端返回 422 或业务校验失败时，别忘了恢复按钮并提示用户，否则体验断裂
disabled 和 aria-disabled 的区别与共存
单纯设 disabled 会让屏幕阅读器完全忽略该按钮（语义上“不存在”），而 aria-disabled="true" 仅表示“当前不可用”，仍可被读出。两者用途不同：
- 真实禁用交互、不参与表单提交 → 用原生
disabled - 视觉上禁用但需保持焦点、或需向辅助技术传达“暂时不可用” → 用
aria-disabled，同时手动阻止click和keydown - 二者不要混用：若同时存在，
disabled优先级更高，aria-disabled被覆盖，失去意义
Vue/React 中禁用按钮的常见陷阱
框架绑定容易掩盖底层逻辑问题：
- Vue 中写
:disabled="isSubmitting"没问题，但若isSubmitting是响应式对象的深层属性（如form.state.isSubmitting），且未用Vue.set或 ES6 Proxy 更新，视图可能不刷新 - React 中用
disabled={isSubmitting}，但若状态更新后没触发重渲染（比如在非 React 环境修改了 state），按钮状态就滞留 - 服务端渲染（SSR）下，首次加载时按钮状态可能和客户端不一致，需要同步初始
disabled值，或用useEffect/mounted延迟设置
禁用本身很简单，难的是判断“什么时候该恢复”——网络超时、请求取消、页面跳转前忘记重置，这些地方最容易漏掉。
