23

我在提交表单时使用 jquery $.post。我想在单击按钮后将其禁用 5 秒钟，以避免多次提交表单。

这是我现在所做的：

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

我以前用过fadeIn和fadeOut，但是当我快速点击按钮测试它时它仍然不起作用。我应该怎么做才能实现我想要发生的事情？

4

6 回答 6

50

你可以像这样做你想做的事：

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

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

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

});

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

编辑

因为即使答案是 8 岁，但仍然受到关注并且 jQuery 越来越不受欢迎，我认为值得添加没有 jQuery的示例

const fewSeconds = 3
 
document.querySelector('#btn').addEventListener('click', (e) => {
    e.target.disabled = true
  setTimeout(() => {
   e.target.disabled = false
  }, fewSeconds * 1000)
})
<input type='button' id="btn" value="click me" />

于 2012-06-07T13:30:58.257 回答
2

只需将其放在提交按钮所在页面的 JS 中即可

<script type="text/javascript">
  $(document).ready(function(){
    $("input[type='submit']").attr("disabled", false);
    $("form").submit(function(){
      $("input[type='submit']").attr("disabled", true).val("Please wait...");
      return true;
    })
  })
</script>

代码源

于 2016-09-02T14:10:27.540 回答
1

看看这里的 .success 函数，这就是你所需要的。

所以你要做的是禁用点击按钮

$('#btn').click(function(){
    $('#btn').attr('disabled', true);
    $.post(base_url + 'folder/controller/function', $('#formID').serialize(), function(data) {
        // code on completion here
        })
        .success(function() { 
           $('#btn').attr('disabled', false);
        })
    });
});

这种方式更好，因为如果您的请求需要超过 5 秒才能返回，会发生什么？

于 2012-06-07T13:34:39.243 回答
1

如果表单中有多个提交按钮并且您想要服务器端的按钮名称，则扩展@Teneff 答案。

<script type="text/javascript">
var fewSeconds = 5;
$('button').click(function(){
    var btn = $(this);
    var text = btn.text();
    setTimeout(function(){
        btn.prop('disabled', true);
        btn.text("Wait...");
    }, 10);
    setTimeout(function(){
        btn.prop('disabled', false);
        btn.text( text);
    }, fewSeconds*1000);
});
<script>
于 2019-10-10T14:37:58.970 回答
1

采用任何形式的按钮并将其值累积到变量中。将值替换为“请稍候...”，并在 5 秒后将先前保存的变量传回并禁用为 false。

    $('input[type=submit], input[type=button]').click(function(){
    var btn = $(this);
    var textd = btn.attr("value");
    btn.prop('disabled', true);
    btn.attr('value', 'Please wait...');
    setTimeout(function(){
    btn.prop('disabled', false);
    btn.attr('value', textd);
    }, fewSeconds*1000);
    });
于 2020-02-03T23:59:27.490 回答
0 
        $('#btn').live('click', function () {
            $(this).prop('disabled', true).delay(800).prop('disabled', false);
        });

//或者

 $('#btn').live('click', function () {
            var obj = $(this);
            obj.prop('disabled', true);
            $.post(base_url + 'folder/controller/function', $('#formID').serialize(), function (data) {
                $('#message').slideDown().html('<span>' + data + '</span>');
                obj.prop('disabled', false);
            });
        });
于 2012-06-07T13:36:17.933 回答