直接禁用按钮并替换文本是最轻量方案，需同时设置disabled属性和textContent，推荐用data-original-text缓存原始文字，预置Spinner结构避免innerHTML替换，并配合服务端幂等校验防重复提交。
Bootstrap按钮点击后如何禁用并显示Loading文字
直接修改 button 的 disabled 属性 + 动态替换文本是最轻量、兼容性最好的方式，不需要额外插件或复杂状态管理。Bootstrap 本身不内置 Loading 状态逻辑，得自己控制 DOM 行为。
常见错误是只改文字没禁用按钮，导致用户狂点触发多次请求；或者用了 async/await 但忘记恢复按钮状态，卡死在 Loading 态。
- 必须同时设置
disabled="true"和修改textContent（或innerText），缺一不可 - 推荐用
textContent而非innerHTML，避免 XSS 风险，也防止意外解析 HTML 标签 - 恢复时要清空
disabled属性（不是设为false），并还原原始文字——建议提前缓存原始文本
使用data属性保存原始按钮文字更安全
硬编码还原文字容易出错，尤其按钮文字含变量或 i18n 场景。用 data-original-text 存原始值，点击时读取、替换、再写回，逻辑清晰且可复用。
<button type="button" class="btn btn-primary"
data-original-text="提交"
onclick="handleClick(this)">提交</button>
JS 中这样处理：
function handleClick(btn) {
const original = btn.dataset.originalText || btn.textContent;
btn.disabled = true;
btn.textContent = '加载中...';
// 模拟异步请求
fetch('/api/submit')
.then(() => {
btn.disabled = false;
btn.textContent = original;
})
.catch(() => {
btn.disabled = false;
btn.textContent = original;
});
}
Bootstrap 5+ 中配合Spinner图标要注意DOM结构
如果想在按钮里加 Bootstrap 自带的 .spinner-border，不能直接 innerHTML 替换整个内容，否则会丢失原有 class 或事件绑定。正确做法是预先在 HTML 里放好 Spinner 元素并隐藏，点击时显隐切换。
错误写法：btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> 加载中...' —— 会清空所有内联事件和潜在数据属性。
- 预置结构示例：
<button><span class="spinner-border spinner-border-sm d-none"></span><span class="btn-text">提交</span></button> - 点击时：移除
d-none到 Spinner，给.btn-text加d-none - 完成时反过来操作，不碰
disabled状态，仍需手动控制
防重复提交的关键是服务端也要校验
前端禁用按钮只是体验优化，不能替代服务端幂等性设计。用户绕过 JS（如禁用脚本、直接调接口）、网络超时重发、或刷新页面后重提，都可能导致重复提交。
真正可靠的方案是服务端配合：
- 生成一次性
submit_token放在表单 hidden 字段，提交后立即失效 - 数据库对关键操作加唯一索引（如订单号、支付流水号）
- 接口返回 409 Conflict 或自定义错误码，前端据此提示“操作已处理”而非重试
按钮 Loading 状态只是第一道门，别让它变成你唯一的安全感。
