bootstrap 5 中禁用按钮唯一可靠方式是使用原生 disabled 属性，而非 .disabled 类；它自动应用样式、阻止交互与表单提交，并需同步设置 aria-disabled 保障可访问性。
Bootstrap 5 中 disabled 属性才是唯一可靠禁用方式
别再手动加 .disabled 类——Bootstrap 5 已移除该类的语义支持，它只响应原生 disabled 属性。你写 <button class="btn btn-primary" disabled>提交</button>，框架会自动应用 opacity: .65、pointer-events: none 和 cursor: not-allowed，且表单提交时该按钮值不会被序列化。
常见错误现象：document.querySelector('button').className += ' disabled' 后按钮仍可点击、回车触发、甚至重复提交接口。
- 用 JS 动态控制必须走
btn.disabled = true或btn.setAttribute('disabled', '')，不能只改 class - 若按钮内容动态变化（如从“提交”变成“保存”），还得同步设置
btn.setAttribute('aria-disabled', 'true')，否则读屏软件可能无法播报当前禁用状态 -
<a></a>标签不支持disabled属性，必须用tabindex="-1"+class="disabled"+event.preventDefault()组合模拟，但这是妥协方案，优先改用<button></button>
.active 类在 Bootstrap 5 中已无交互意义
.active 只是视觉标记，不改变按钮行为或语义，也不影响 click、focus 或表单逻辑。它常被误用于“高亮当前选中项”，比如导航按钮或筛选标签，但这和禁用逻辑完全无关。
容易踩的坑：<button class="btn btn-primary active" disabled></button> —— .active 和 disabled 同时存在时，Bootstrap 5 会按 :disabled 规则渲染（灰度+不可点），.active 的背景强化效果直接被覆盖，白加。
- 需要“按下态”反馈？靠 CSS
:active伪类就够了，无需加类 - 要表达“当前激活页签”？用
aria-current="page"更语义化，配合自定义样式控制视觉 - 别把
.active当状态控制器——它不阻止事件、不修改 DOM 属性、不参与表单校验流程
加载中按钮必须 disabled + 文本/图标替换 + finally 恢复
用户狂点、网络失败、请求中断——这些场景下，按钮卡在“加载中”是高频 bug。核心原则：状态变更必须原子化，且恢复逻辑不能只写在 then() 里。
典型翻车现场：fetch().then(() => { btn.textContent = '提交'; btn.disabled = false; })，一旦接口返回 400 或超时，按钮就永远挂着 spinner。
- 点击回调第一行就执行：
btn.disabled = true+btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>加载中' - 原始文字提前存到
btn.dataset.originalText，避免 innerHTML 清空 data-* 属性 - 无论成功、失败、abort，都统一进
finally块：btn.disabled = false+btn.innerHTML = btn.dataset.originalText - 移动端补一刀：
btn.style.pointerEvents = 'none'，防 WebView 点击穿透（尤其安卓旧版）
禁用按钮的可访问性盲区最容易被忽略
表面看按钮变灰、鼠标变禁止符号就完事了，但键盘用户 Tab 到它、读屏软件聚焦它时，若没正确暴露状态，整个操作链就断了。
关键点不在“能不能点”，而在“用户知不知道它不能点”。仅靠 disabled 属性对部分旧读屏器不够——它们依赖 aria-disabled="true" 主动播报。
- JS 动态禁用时，必须同步设
btn.setAttribute('aria-disabled', 'true')；恢复时设'false'或删掉该属性 - 检查浏览器开发者工具的 Accessibility 面板，确认禁用按钮的 “Disabled” 属性为 true，且 Role 是 button（不是 generic）
- 别用
pointer-events: none替代disabled：它不阻断键盘焦点，Tab 还能停上去，Enter 仍可能触发 click - 如果按钮里嵌了图标（如
<i class="bi bi-x"></i>），又用了pointer-events: none，图标自身的交互能力也一并废了
