layui中设置提交按钮不可以重复提交,提交一次后置灰。
首先要在jsp中给按钮设置属性
<div class="layui-card-header layuiadmin-card-header-auto" style="padding-bottom:0px;">
<button class="layui-btn layui-btn-bk-red layuiadmin-btn-useradmin site-demo-active " id="back">回退</button>
<button class="layui-btn layui-btn-bk-red layuiadmin-btn-useradmin site-demo-active" id="submit">提交</button>
</div>
在class中添加site-demo-active 属性。
然后在js中编写逻辑处理
$('#submit').on('click', function (obj) {
layer.confirm('确定提交吗?', function (index) {
// 单击之后提交按钮不可选,防止重复提交
var DISABLED = 'layui-btn-disabled';
// 增加样式
$('.site-demo-active').addClass(DISABLED);
// 增加属性
$('.site-demo-active').attr('disabled', 'disabled');
if (resp != null && resp.repCode != null && resp.repCode == "000000"){
layer.msg("成功", {icon: 6, time:3000});
}
});
});
给按钮设置点击事件增加下列代码处理
// 单击之后提交按钮不可选,防止重复提交
var DISABLED = 'layui-btn-disabled';
// 增加样式
$('.site-demo-active').addClass(DISABLED);
// 增加属性
$('.site-demo-active').attr('disabled', 'disabled');
也可以设置处理成功后按钮设置不可用,只需要将上面代码加到后台响应信息处理下面
这样就可以避免按钮进行重复提交。