点击提交按钮后禁用提交按钮3秒后再启用

港控/mmm° 2022-11-26 07:54 165阅读 0赞

功能:防止乱点,多次触发事件  
效果:点击提交按钮后 禁用提交按钮3秒后 再启用 提交表单

<input class="btn btn-primary radius"  onclick="return btnDisable(this)"  id="submit" type="submit"  value="  提交  ">

注意:页面要引入layer.js和jquery.js

//点击提交按按钮后 禁用提交按钮3秒后 再启用
    /**
     * @param obj 当前对像
     * @param num 提交页面里第几个表单,默认提交第一个
     * @author haima
     */
    function btnDisable(obj,num=0){
        var obj = $(obj);
        //loading层
        // obj.attr('disabled','true');
        var newbtn=obj.clone(); 
        newbtn.attr('disabled','true');
        newbtn.attr('style','background-color:grey');
        obj.after(newbtn);
        obj.attr('style','display:none');
        var index = layer.load(0, {shade: false,time: 2000});//0代表加载的风格，支持0-2
        setTimeout(function () {
            obj.attr('style','display:inline-blck');
            newbtn.remove();
        },3000);
        // jQuery("form").eq(0).submit();
        // $("form").eq(num).submit();
    }

效果:

![format_png][]

[format_png]: /images/20221124/2d5bf2f2dc064c9e9df1243108e7b5e1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，165人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery禁用/启用提交按钮

问：我有这个 HTML：我该怎么做这样的事情：当文本字段为空时，应禁用提交 (disabled=“disabled”)。在文本字段中键入内容以删除禁用属性时

以你之姓@/ 2024年03月30日 17:50/ 0 赞/ 17 阅读

相关页面点击按钮后 10秒内不可点击（前端判断防止重复提交，触发接口）

.disable { / 阻止点击 / pointer-events: none; } <div class="bt

曾经终败给现在/ 2023年01月16日 06:19/ 0 赞/ 99 阅读

相关点击提交按钮后禁用提交按钮3秒后再启用

功能:防止乱点,多次触发事件效果:点击提交按钮后禁用提交按钮3秒后再启用提交表单 <input class="btn btn-primary radius

港控/mmm°/ 2022年11月26日 07:54/ 0 赞/ 166 阅读

相关 vue 提交按钮点击后显示处理中，禁止二次点击

<el-button type="primary" :disabled="submitLoading" @click="dataFormCheck">{

旧城等待，/ 2022年10月07日 14:51/ 0 赞/ 160 阅读

相关给submit提交按钮添加点击事件（JavaScript）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl

快来打我*/ 2022年09月30日 00:45/ 0 赞/ 221 阅读

相关点击复选框，按钮禁用/启用

长话短说，一个小功能，按钮最开始的时候是禁用，选择复选框后，按钮启用，再点击一下，按钮禁用。 ![Center][] 本次使用angularjs混合jquery来使用

骑猪看日落/ 2022年08月20日 10:29/ 0 赞/ 186 阅读

相关点击按钮一次之后禁用按钮

点击按钮一次之后禁用按钮这里我们可以用几种方法，首先第一种是用unbind()这个方法。先举个例子： <html> <head> <script type="

谁践踏了优雅/ 2022年07月12日 11:29/ 0 赞/ 354 阅读

相关如何在Html页面点击按钮提交数据后防止回车被重复提交

前言：今天收到客户的一个奇怪BUG描述，事件描述大概如下： ![表单页面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_t

小鱼儿/ 2021年10月14日 00:30/ 0 赞/ 841 阅读

相关 jQuery 禁用表单提交按钮，防止用户请求重复提交

当页面上有表单的时候，为了防止用户等不及服务器端响应重复点击提交按钮向服务器端发送重复请求，我们通常需要在请求提交之前将提交按钮禁用。先来看一下页面。 ![在这里插入图片

柔情只为你懂/ 2021年05月12日 11:49/ 0 赞/ 497 阅读

相关解决表单提交，点击按钮提交多次的问题

定义一个状态码 // 表单提交performanceList // 修改提交 var saveflag=true;//防止点击多次提交的状态码

灰太狼/ 2021年01月20日 06:27/ 0 赞/ 686 阅读