Question

这里有几个主题，但我没有找到一个特别处理我在我的应用程序中广泛使用的令人敬畏的jQuery Form plugin。

我希望用户只能点击“提交”一次 - 并禁用“提交”按钮，直到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部分中删除已启用，在成功时反向启用）。

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

3 个答案: