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

港控/mmm° 2022-11-26 07:54 221阅读 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 条评论，221人围观）

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

相关阅读

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

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

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

相关点击按钮失效5秒

<input type="button" value=" 失效5秒 " id="me" οnclick="this.disabled=true;setTimeout('me.d

╰半夏微凉°/ 2024年02月17日 20:05/ 0 赞/ 57 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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