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

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

这就是我现在所做的：

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

我之前使用过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秒服务器端响应延迟的示例

Answer 2

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

代码来源

Answer 3

  $('#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('' + data + ''); obj.prop('disabled', false); }); }); 

Answer 4

看看.successfunction，这就是你需要的。

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

 $('#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秒才能返回，那么这种情况会更好吗？