layUI防止多次点击重复提交

时间:2021-10-27
本文章向大家介绍layUI防止多次点击重复提交,主要包括layUI防止多次点击重复提交使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

//监听 弹框-变更处理备注-提交

        form.on('submit(popFormSubPass)', function (data) {

            //防止重复点击: 单击之后提交按钮不可选,防止重复提交

            var DISABLED = 'layui-btn-disabled';

            $(':button').addClass(DISABLED); // 添加样式

            $(':button').attr('disabled', 'disabled');  // 添加属性

请求响应失败移除样式,可再次提交

layer.msg(response.msg, {icon: 5});

    //移除禁止提交状态

    $(':button').removeClass(DISABLED);

    $(':button').removeAttr('disabled');

    $("#dssubmit").click(function(){
        let chooseFile = $("#fileTips").html()
        if(!chooseFile){
            layer.msg('请先上传文件', {icon: 2}); //简单提示
            return
        }
        //点击成功之后立即不能点击导入
        let DISABLED = 'layui-btn-disabled'
        $("#dssubmit").addClass(DISABLED)
        $("#dssubmit").attr('disabled','disabled')
        setTimeout(function() {
            // console.log(DISABLED)
            $("#dssubmit").removeClass(DISABLED)
            $("#dssubmit").removeAttr('disabled')
        }, 5000);//5秒后才能点击
    })
layer.confirm('确定?', {
  btn: ['按钮一']
}, function(index, layero){
  //按钮【按钮一】的回调
layui.$('#layui-layer'+index).find('.layui-layer-btn0').prop('disabled',true).css("pointer-events","none").addClass('layui-disabled');
// 或者直接关闭confirm提示层
//layer.close(index)
});

执行后弹出以下界面:
layui.$('#layui-layer'+index).find('.layui-layer-btn0').prop('disabled',true).css("pointer-events","none").addClass('layui-disabled');该JS会把该按钮属性变成禁止点击。

layer.close(index) 该JS是你点击按钮执行后直接关闭confirm层,从而不会让你有机会点第二下

在这里我用的第二个JS直接关闭。不会让测试有机会点到第二下




原文地址:https://www.cnblogs.com/webSnow/p/15471236.html