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部分中删除已启用，在成功时反向启用）。