直接加 disabled 属性最可靠，因原生 disabled 能真正禁用交互、阻止事件、屏蔽表单提交并保障可访问性；仅加 class="disabled" 仅视觉禁用，无实际防护。
直接加 disabled 属性最可靠
Bootstrap 按钮禁用，核心就是原生 HTML 的 disabled 属性。只要按钮是 <button></button> 元素（不是 <a></a>），加这个属性就能真正禁用交互、触发浏览器默认禁用样式，且语义正确。
常见错误是只加 class="disabled" —— 这只是让按钮看起来灰掉，但点击事件仍会触发，tab 键还能聚焦，表单提交时也照常提交，完全不安全。
-
<button type="button" class="btn btn-primary" disabled>保存</button>✅ 正确 -
<button type="button" class="btn btn-primary disabled">保存</button>❌ 仅视觉禁用，无实际防护 - 对
<a></a>标签不能用disabled（无效），得用class="disabled" + pointer-events: none配合 JS 阻断 click
disabled 和 .disabled 的 CSS 表现差异
Bootstrap 的 .disabled 类只做两件事：降低透明度（opacity: .65）和加 pointer-events: none。但它不阻止键盘焦点、不屏蔽表单提交、也不影响屏幕阅读器的可访问性状态。
而原生 disabled 属性会：
- 自动移除焦点能力（
tabindex失效） - 阻止所有鼠标/键盘事件冒泡
- 让屏幕阅读器播报“已禁用”
- 在表单中被
form.elements忽略，不参与提交
所以哪怕你用 JS 动态控制，也该操作 el.disabled = true，而不是切 class。
React/Vue 中动态禁用按钮的写法
框架里别手动操作 DOM 类名，要用响应式绑定。关键点是：属性名必须是 disabled，值为布尔类型。
- React：
<button classname="btn btn-success" disabled>提交</button> - Vue：
<button class="btn btn-success" :disabled="loading">加载中</button> - 错误示范：
:class="{ 'disabled': loading }"—— 只改样式，不真正禁用
注意：如果按钮内部有图标（比如 <i class="bi bi-check"></i>），禁用后图标颜色不会自动变灰——Bootstrap 不接管子元素样式，需额外加 .btn:disabled i { opacity: .65; } 之类规则。
禁用状态下的表单验证绕过问题
很多人以为按钮禁用了，表单就不会提交，其实不然：如果用户绕过按钮（比如按回车键触发表单 submit），或 JS 主动调用 form.submit()，禁用按钮完全不影响提交逻辑。
真正需要阻止提交，得靠：
- 给
<form></form>加onsubmit="return false"或监听submit事件并preventDefault() - 服务端始终校验，前端禁用只是体验优化
- 若按钮是唯一提交入口，禁用它 + 同时对
form设disabled（不推荐）或 JS 控制提交开关
禁用按钮从来不是安全机制，只是第一层交互反馈。容易被忽略的是：它不等于禁用整个表单，也不等于跳过验证逻辑。
