直接用disabled属性禁用按钮最稳妥，它原生实现视觉变灰、阻止点击与键盘触发、跳过表单提交；仅靠css类或pointer-events:none不可靠，无法保障可访问性与行为一致性。
直接用 disabled 属性禁用按钮是最稳妥的做法
别纠结 css 类或 js 模拟，disabled 是浏览器原生支持的语义化属性，它同时做到三件事：视觉变灰（bootstrap 自动应用 opacity: .65 和 cursor: not-allowed）、阻止鼠标点击和键盘触发（enter/space）、跳过表单序列化提交。写成 <button class="btn btn-primary" disabled>提交</button> 就完事了。
常见翻车点是只加 class="disabled" —— Bootstrap 5 已彻底移除对该类的语义支持，它只改样式，不拦事件、不屏蔽键盘、不告诉屏幕阅读器“这按钮废了”。你 Tab 过去按空格，照样触发 click；表单 submit 时，它的 value 还在请求体里。
JS 动态控制时，必须操作 disabled 属性本身，不能只切 class
用 JS 开关禁用状态，光写 btn.classList.add('disabled') 或 btn.style.pointerEvents = 'none' 都是半吊子。正确姿势只有两个：
-
btn.disabled = true（推荐）或btn.setAttribute('disabled', '') - 同步设置可访问性：
btn.setAttribute('aria-disabled', 'true')（启用时用removeAttribute('aria-disabled')） - 业务逻辑里检查状态，别信 class：
if (!btn.hasAttribute('disabled')) { /* 发请求 */ }
漏掉任一环，就可能造成重复提交、键盘用户误操作，或读屏软件报错“按钮已启用”但实际点不动。
为什么 pointer-events: none 不该用来禁用按钮功能
这个 CSS 属性只管鼠标和触摸事件，对键盘焦点、Enter 触发、:active 伪类完全无效。加了它，按钮依然能被 Tab 到，按空格照样执行 click；父级事件委托也可能捕获到它；子元素（比如图标）设 pointer-events: auto 在多数浏览器里也不起作用。
它唯一适合的场景是临时遮罩，比如加载中 spinner 叠在按钮上——此时你真正需要的是“视觉暂不可点”，而不是“功能永久关闭”。真要禁用功能，disabled 属性才是唯一可靠入口。
链接按钮（<a></a>）禁用必须另想办法
<a></a> 元素不支持 disabled 属性，硬加无效。若必须用链接模拟按钮，得组合三样东西：
- 加
class="disabled"（Bootstrap 会降 opacity、去 hover） - 加
tabindex="-1"阻止键盘聚焦 - 在 click 事件里调用
event.preventDefault()阻止跳转
但这只是妥协方案。优先把 <a href="#"></a> 改成 <button type="button"></button>，语义清晰、行为可控、无障碍友好。很多“禁用不了”的问题，根源其实是用了不该用的标签。
最常被忽略的细节是：JS 控制时忘记同步 aria-disabled，以及在 Bootstrap 5 项目里还沿用老版本的 .disabled 类写法。这两处一错，功能看似正常，残障用户和自动化测试就全乱套了。
