點擊按鈕變成灰色不可再次點擊

很多時候，當我們點擊提交按鈕，如果因為執行的程序太慢，或是網絡問題，就會一直處於提交狀態。

不了解的人，還以為是沒有提交成功，於是就會一直點提交、提交、提交……

這樣就會造成多次提交，而產生重復記錄。

那么要如何才能防重復提交呢？

小編的做法就是，使用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