jQuery Form插件 - 如何防止雙重提交？

Question

這里有幾個線程在SO，但我沒有找到一個專門處理我在我的應用程序中廣泛使用的令人敬畏的jQuery Form插件 。

我希望用戶只能單擊“提交”一次 - 並禁用“提交”按鈕，直到Ajax成功返回JSON字符串。

我的試用代碼是這樣的

$('#submit_button').live('click', function(e) {
e.preventDefault();

var options = {
    type:           'post',
    dataType:       'json',
    beforeSubmit:   function(){
                        $('#loading').show().fadeIn();
                        $('#submit_button').attr('disabled', 'disabled');
                    },
    success:        function(data) {
                            if (data.success === 3) {
                                $('#submit_button').hide();
                                $('#loading').hide();
                                $('#validation_message').html(data.message).fadeIn();
                                $('#submit_button').attr('enabled', 'enabled');
                            }
                    }
            }

$(this).closest('form').ajaxSubmit(options);
});

但這會在<button>堆積“啟用”和“禁用”屬性。

<button class="button" id="submit_button" disabled="disabled" enabled="enabled"> Post </button>

您對如何使其工作有任何建議嗎？

Answer 1

您不想將屬性“啟用”設置為“已啟用”，而是取消設置“已禁用”屬性： $('#submit_button').attr('disabled', '');

HTML沒有按鈕的“啟用”屬性，因此瀏覽器不會對它做任何事情 - 它認為它只是一個“垃圾”屬性。 設置和取消設置“禁用”屬性就是你所追求的。

Answer 2

嘗試：

在成功處理程序中添加此行..

 $('#submit_button').removeAttr('disabled');

在成功處理程序中刪除此行：

$('#submit_button').attr('enabled', 'enabled');

Answer 3

目前無法測試，但使用removeAttr應該有幫助（在beforeSubmit部分中刪除已啟用，在成功時反向啟用）。