必须使用 disabled 属性而非 disabled 类：Bootstrap 5 中仅加 class="disabled" 不禁用交互，需用 button.setAttribute('disabled', '') 或 button.disabled = true，并同步设置 aria-disabled、pointer-events 和 tabIndex 才能确保语义、视觉与行为一致。
必须用 disabled 属性，不是加 disabled 类
bootstrap 5 不再支持仅靠 class="disabled" 实现真正禁用。它只影响样式，不阻止点击、键盘触发或表单提交。你看到按钮变灰了，但用户仍能按空格键提交、tab 切换后回车、甚至屏幕阅读器完全不知道它已禁用——这些全是 class="disabled" 漏掉的交互路径。
正确做法只有一条：button.disabled = true 或 button.setAttribute('disabled', '')。Bootstrap 5 内部通过 button:disabled 伪类接管样式，自动应用 opacity: .65、pointer-events: none 和 cursor: not-allowed，语义、视觉、行为三者同步。
- 别写
<button class="btn btn-primary disabled">提交</button>—— 这是 Bootstrap 4 的遗留写法，5 中已废弃 - 检查浏览器开发者工具的 Computed Styles，确认生效的是
button:disabled规则，而不是类名匹配 - 如果用了
<a></a>标签模拟按钮，disabled属性无效，必须手动加tabindex="-1"+aria-disabled="true"+pointer-events: none
fetch 请求里怎么安全地锁住按钮
按钮点击后必须「立刻」禁用并改文本，否则网络稍慢时用户会连点两次。但恢复不能只在 then() 里做，否则请求失败（如 400/500、超时、Abort）后按钮就永远卡在加载态。
关键逻辑必须包裹在 finally() 块里，且要还原所有状态：
- 用
removeAttribute('disabled')恢复，不是button.disabled = false（后者在某些旧环境可能不触发样式重绘） - 提前存原始文字：比如
btn.dataset.originalText = btn.textContent，避免 DOM 注入风险 - 别用
innerHTML直接拼字符串，尤其含用户输入内容时；改用document.createElement('span')插入spinner-border - 如果用了
AbortController，finally里记得调用abortController.abort()释放连接
移动端点透和键盘焦点还得额外加固
某些安卓 WebView 和老版 Safari 对 disabled 的 pointer-events 拦截不彻底，手指轻点按钮区域可能穿透到背后弹窗的关闭按钮；键盘用户 Tab 到该按钮后按空格，仍可能触发 click——这不是 Bug，是规范实现差异。
临时加固方案要同时处理两件事：
- 加
button.style.pointerEvents = 'none'，补全指针事件屏蔽 - 设
button.tabIndex = -1，移除键盘可聚焦能力 - 还原时一并清理：
button.style.removeProperty('pointer-events')和button.tabIndex = 0 - 注意：别对所有按钮无差别加
pointer-events: none，它会让子元素（如图标、下拉箭头）也失效，且破坏屏幕阅读器识别
别忘了 aria-disabled 这个盲区
部分读屏软件（尤其是 NVDA + Firefox）依赖 aria-disabled="true" 才播报“按钮已禁用”，光靠 disabled 属性可能被跳过。JS 动态控制时，这个属性必须同步设置。
漏掉它，视障用户根本不知道按钮已被锁住，可能反复尝试或误判流程卡死。
- 禁用时：
button.setAttribute('aria-disabled', 'true') - 启用时：
button.removeAttribute('aria-disabled') - 业务逻辑里别只靠
button.classList.contains('disabled')判断状态，要用button.hasAttribute('disabled')
最易被忽略的，是把 disabled 当成纯样式开关——它其实是语义、交互、无障碍三条线拧在一起的锁扣，少拧任何一颗螺丝，都会在某个用户场景里松脱。
