最有效防重复点击是严格绑定禁用至请求生命周期:submit回调开头用prop('disabled',true)禁用按钮,同步改文字、加layui-btn-disabled类;必须在ajax的complete钩子中统一恢复,且只禁用按钮不碰表单项,避免校验跳过或状态丢失。

layui下拉框本身不触发提交,真正要防的是绑定在它身上的 submit 事件
下拉框(select)自己不会提交表单,但常被放在 form 里,和 lay-submit 按钮一起参与提交流程。所谓“下拉框重复点击导致重复提交”,99% 是用户猛点提交按钮,而非反复点下拉框——所以防护重点不在 select 上,而在 form.on('submit()') 的回调里。
如果你真在下拉框的 change 事件里写了提交逻辑(比如选完就自动提交),那才需要单独加锁,但这种设计极不推荐:破坏用户预期、绕过表单校验、移动端体验差。
form.on('submit') 中禁用按钮必须用 .prop('disabled', true)
这是最常踩的坑:用 .attr('disabled', 'disabled') 在部分浏览器(尤其旧版 iOS WebView)下无效,按钮视觉灰了但还能点;而 .prop() 操作的是 DOM 属性的真实状态,可靠得多。
- 禁用动作必须写在回调函数第一行,不能等验证完再禁用——否则用户连点两次,第二次会跳过验证直接发请求
- 同步改文字:
.text('提交中…'),加样式:.addClass('layui-btn-disabled'),提供明确反馈 - 千万别对
select或其他表单项加disabled——layui.form.verify()会跳过所有 disabled 字段,必填项就白校验了
complete 钩子里统一恢复按钮,别只写 success
$.ajax() 的 success 只管 HTTP 2xx 响应,但网络超时、500 错误、甚至用户切页再切回,都会让按钮卡死在 disabled 状态。必须把恢复逻辑塞进 complete 钩子:
$.ajax({
url: '/api/submit',
type: 'POST',
data: data.field,
complete: function() {
$(this).prop('disabled', false).text('提交').removeClass('layui-btn-disabled');
}
});
注意:这里的 this 是指触发 submit 的按钮 jQuery 对象,不是 ajax 请求对象——实际代码中需提前缓存,例如 var btn = $(this);,再在 complete 里用 btn.prop(...)。
移动端 touchstart 阶段就得禁用,别等 click
安卓 WebView 和旧版 iOS 有 300ms click 延迟,用户快速双击可能触发两次 click,但 touchstart 是即时的。稳妥做法是在 form.on('submit') 里禁用的同时,额外给按钮加 touchstart 监听:
$('button[lay-submit]').on('touchstart', function(e) {
if (!$(this).is(':disabled')) {
$(this).prop('disabled', true).text('提交中…').addClass('layui-btn-disabled');
e.preventDefault();
}
});
这个监听只需绑定一次,且必须确保没被重复引入的 layui.js 导致多次绑定——检查 HTML 是否同时加载了 layui.js 和 layui.all.js,这是隐藏最深、复现最难的重复提交根源。


















