码迷,mamicode.com
首页 > 其他好文 > 详细

点击按钮变成灰色不可再次点击

时间:2017-11-07 11:20:03      阅读:278      评论:0      收藏:0      [点我收藏+]

标签:很多   this   blog   move   www   eve   pre   event   targe   

很多时候,当我们点击提交按钮,如果因为执行的程序太慢,或是网络问题,就会一直处于提交状态。

不了解的人,还以为是没有提交成功,于是就会一直点提交、提交、提交……

这样就会造成多次提交,而产生重复记录。

那么要如何才能防重复提交呢?

小编的做法就是,使用js来控制。

当点击提交后将按钮变成灰色,并将其value值改为一个提示信息,比如“正在提交中,请稍等...”

下面我们来看看详细代码。

    <style>
    input.btn_add{ background:#1abc9c; font-size:22px; color:#fff; border-radius:4px; border:none;width:200px; height:50px;}
    input.btn_add_no{ background:#cccccc; font-size:22px; color:#333; border-radius:4px; border:none;width:200px; height:50px;}
    </style>
    <input type="button" name="syncbtn" class="syncbtn btn_add" value="同步订单" />
    <script>
    $(document).on("click",".syncbtn",function(){
        var oldvalue=$(this).val();
        $(this).val("正在同步,请稍等......");
        $(this).attr("disabled","disabled");
        $(this).removeClass("btn_add");
        $(this).addClass("btn_add_no");
        alert("暂停");//由于这里没有执行过程久的程序,所以使用alert才能看到效果。
        //执行相关代码
        //执行成功后再还原回去,如下代码
        $(this).removeAttr("disabled");
        $(this).removeClass("btn_add_no");
        $(this).addClass("btn_add");
        $(this).val(oldvalue);
    });
    </script>

在实例中,我们有用到unbind()方法,其目的地是移除按钮的事件处理程序,也就是当按钮处于灰色状态时,点击也不会执行代码。

原文来自http://www.santii.com/article/24.html

点击按钮变成灰色不可再次点击

标签:很多   this   blog   move   www   eve   pre   event   targe   

原文地址:http://www.cnblogs.com/startend/p/7797885.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!