禁用按钮并替换文字为“保存中...”或内嵌Spinner是最简单可靠的防重复提交方案，需在AJAX的always或finally中统一恢复按钮状态，同时保留原始innerHTML结构。
Modal 保存按钮点击后禁用并显示 Loading 状态
直接禁用按钮 + 替换文字是最简单可靠的做法，避免用户重复提交，也符合
bootstrap
的交互预期。关键不是加动画，而是阻断二次点击。
用
禁用按钮本身，比仅靠 CSS 遮罩更稳妥（防止键盘回车或 focus 触发）
把按钮内文字替换成
或带
的 HTML 片段
务必在 AJAX 成功/失败回调里恢复按钮状态，否则 Modal 关闭后按钮仍被锁住
不要只改
，要保留原始 innerHTML（含图标、
等），否则可能丢失样式结构
使用 Bootstrap 5 的
内嵌到按钮中
Bootstrap 5 自带的
可以直接塞进按钮，但需注意尺寸和对齐。默认是 inline 元素，容易换行或错位。
给按钮加
（或用
配合
）
推荐写法：
如果按钮原本有图标（如 Font Awesome），记得在加载态移除图标，只留 spinner + 文字，避免堆叠
是 Bootstrap 5 的 margin 工具类，确保 spinner 和文字之间有空隙；旧版用
AJAX 提交后没恢复按钮状态的常见原因
最常踩的坑不是“怎么加 loading”，而是“怎么关掉”。很多代码只在
回调里恢复按钮，却忽略了
或
分支。
原生Bootstrap旋转木马特效
原生Bootstrap旋转木马特效是一款基于jQuery实现的图片轮播切换代码。
下载
用
或
统一恢复，而不是只在
里做
恢复时别只改文字，要同时移除
属性、清空 spinner HTML（或用
存原始内容）
如果 Modal 是动态生成的（比如从模板 clone），按钮 DOM 可能被重建，此时用事件委托或绑定在父容器上会失效
Vue/React 项目里，直接操作 DOM 改按钮状态容易和响应式脱节，优先用
/
控制渲染
Modal 多个表单共用一个保存按钮时的状态管理
一个 Modal 里有多个 tab 或步骤，每个步骤都有自己的表单和保存逻辑，但按钮只有一个 —— 这时不能只靠按钮 DOM 属性判断当前状态。
用一个变量（如
）或 data 属性（如
）标记当前激活的表单
点击保存前先校验
对应的表单有效性，再决定调哪个 API
不同步骤的 loading 状态可以复用同一个按钮，但 success 提示要差异化（比如“基础信息已保存” vs “上传完成”）
别在按钮上硬编码所有步骤的文案，用对象映射：
实际最难处理的是异步嵌套：比如保存后要立即触发另一个接口（如生成预览），又或者 Modal 关闭逻辑依赖两个请求都完成。这种时候 loading 状态得跨请求维持，光靠单个按钮的 disabled 不够，得配合全局 pending 标志或 Promise.all。
btn.disabled保存中...textContentspanSpinnerspinner-borderposition: relativebtn-smspinner-border-smme-1mr-1successerroralways$.ajax().always()fetch().finally()then()disableddata-original-textv-ifuseStatecurrentStepdata-step="2"currentStep{ step1: '保存基础信息', step2: '提交附件' }