使用 JQuery 禁用 Html 按钮一段时间答案

【问题标题】：Disable Html button with JQuery for a period使用 JQuery 禁用 Html 按钮一段时间
【发布时间】：2013-03-25 15:45:20
【问题描述】：

我有一个 html 按钮，我想用 jquery 禁用它，在它被点击后大约 10 秒后我想启用它。

$('#test').click(function(){
     $("#test").attr("disabled", true);
     $('#test').html('Bitte warten..<img src="<?=CDN('/icons/loading/loading5.gif')?>" />');
});

我的计时器部分有问题。我知道有类似setInterval(function() {}, 5000); 的东西，但这会一遍又一遍。

【问题讨论】：

您可以使用clearInterval 摆脱现有的setInterval。

标签： jquery button javascript

【解决方案1】：

您可以使用setTimout在间隔后启用按钮。

$('#test').click(function(){
     $("#test").attr("disabled", true);
     setTimout(function(){
         $("#test").attr("disabled", false); 
      }, 10000);  
     $('#test').html('Bitte warten..<img src="<?=CDN('/icons/loading/loading5.gif')?>" />');
});

【讨论】：

【解决方案2】：

我希望这会有所帮助。

$('#some-button').attr("disabled", "disabled");
setTimeout('enableButton()', 5000);

function enableButton(){
   $('#some-button').removeAttr('disabled');
}

【讨论】：

【解决方案3】：

您可以为此使用 setTimeout 函数：

$('#test').click(function(){
     $("#test").attr("disabled", true);
     $('#test').html('Bitte warten..<img src="<?=CDN('/icons/loading/loading5.gif')?>" />');

     setTimout(function(){
          timeOutHit()
      }, 10000);  

});

function timeOutHit()
{
   $("#test").attr("disabled", false);
}

【讨论】：

【解决方案4】：

请参阅setTimeout 是您希望在特定时间段内使用的选项。

$('#test').click(function(){
   $(this).prop("disabled", true);
   setTimout(function(){
       $(this).prop("disabled", false); 
   }, 10000);  
   $(this).html('Bitte warten..<img src="<?=CDN('/icons/loading/loading5.gif')?>" />');
});

但是如果在这段时间内没有完成工作怎么办。如果您使用的是 ajax，那么您可以尝试使用 ajaxComplete() 函数。

$('#test').click(function(){
   $(this).prop("disabled", true);
   $(document).ajaxComplete(function(){
       $("#test").prop("disabled", false); 
   });  
   $(this).html('Bitte warten..<img src="<?=CDN('/icons/loading/loading5.gif')?>" />');
});

【讨论】：