单击后禁用提交按钮,几秒钟后再次启用它

Question

我在提交表单时使用的是jquery $ .post.我想在点击按钮5秒钟后禁用该按钮,以避免多次提交表单.

这就是我现在所做的:

$('#btn').click(function(){
    $.post(base_url + 'folder/controller/function',$('#formID').serialize(),function(data){
        $('#message').slideDown().html('<span>'+data+'</span>');
    });
});

我之前使用过fadeIn和fadeOut,但是当我测试它快速点击按钮时它仍然不起作用.我该怎么做才能实现我想要的目标？

Answer 1

你可以这样做你想做的事:

var fewSeconds = 5;
$('#btn').click(function(){
    // Ajax request
    var btn = $(this);
    btn.prop('disabled', true);
    setTimeout(function(){
        btn.prop('disabled', false);
    }, fewSeconds*1000);
});

或者您可以使用jQuery的.complete()方法,该方法在ajax收到响应后执行:

$('#btn').click(function(){
    var btn = $(this);
    $.post(/*...*/).complete(function(){
        btn.prop('disabled', false);
    });
    btn.prop('disabled', true);

});

编辑: 这是 3秒服务器端响应延迟的示例