摘要：
不了解它的人认为它没有成功提交，所以他们总是单击提交、提交、提交。。。这将导致多次提交和重复记录。单击提交后，按钮将变为灰色，其值将更改为提示消息，例如“正在提交，请稍候…”让我们查看下面的详细代码//执行相关代码//成功执行后恢复。以下代码为$。removeAttr；$removeClass；$。addClass；$。val；}）；在示例中，我们使用unbind（）方法，其目的是删除按钮的事件处理程序，即当按钮处于灰色状态时，单击将不会执行代码。
很多时候，当我们点击提交按钮，如果因为执行的程序太慢，或是网络问题，就会一直处于提交状态。
不了解的人，还以为是没有提交成功，于是就会一直点提交、提交、提交……
这样就会造成多次提交，而产生重复记录。
那么要如何才能防重复提交呢？
小编的做法就是，使用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