禁用后，点击提交按钮，几秒钟后，再回来​​启用

问题描述

我使用jQuery $。员额提交表单的时候。我想禁用按钮像5秒钟被点击之后，以避免重复提交表单。

I'm using jquery $.post when submitting a form. I want to disable the button for like 5 seconds after it has been clicked to avoid multiple submission of the form.

下面就是我现在做的：

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

我使用淡入淡出和前，但仍不能当我测试一下快速按钮的工作。我应该怎么做才能达到我想要的东西发生吗？

I've used fadeIn and fadeOut before, but still it doesn't work when I tested it clicking the button rapidly. What should I do to achieve what I wanted to happen?

推荐答案

您可以做任何你想要的东西是这样的：

You can do what you wanted like this:

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（）方法接收响应：

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

});

编辑： 这是一个例子的3秒服务器端的响应延迟

edit: this is an example with 3 seconds server-side response delay

这篇关于禁用后，点击提交按钮，几秒钟后，再回来​​启用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！