禁用按钮超时

Question

我有这种形式的条件，发布数据前提醒验证错误。问题是如果有人双击（可能错误），表单被提交，然后第一次点击清除表单，然后第二次点击将提醒“表单为空”，这可能会造成混淆，因为它全部发生在瞬间。所以我想要的是当点击3秒时暂时禁用按钮。但我现在只是将整个功能暂停3秒，而不是关闭按钮。我应该怎么做？这里是表单的简化版本。由于

$('#send').click(function(){ 

    var self = $('#send'); 
     setTimeout(function() { 
     self.disabled = false; 
    if(!$('#text').val()){ 
     alert('field empty'); 
    }else{ 
     $('#message').html('done'); 
     $('#text').val(''); 
    } 
    }, 3000); 
}); 

Answer 1

我写了一个小例子对你来说，禁止在点击一个按钮。超时将在3000毫秒后启用按钮。

Working demo

HTML：

<input id="text"> 
<input id="send" type="button" value="send"/> 
<div id="message"></div> 

的Javascript：

$('#send').click(function(){ 
    var button = $(this); 
    button.attr('disabled', 'disabled'); 
    setTimeout(function() { 
     button.removeAttr('disabled'); 
    },3000); 
    if(!$('#text').val()){ 
     alert('field empty'); 
     button.removeAttr('disabled'); 
    }else{ 
     $('#message').html('done'); 
     $('#text').val(''); 
    } 
}); 

Answer 2

你可以使用jQuery的one()，而不是click()。一旦该功能运行，它将被解除绑定。
如果你想重新启用它，你可以把超时重新绑定在函数的末尾。

用你的方法，它看起来像你从来没有真正禁用按钮：

this.disabled = 'disabled'; 

Answer 3

你是不是正确禁用按钮。您正在设置jQuery对象上的.disabled属性，而不是包装的DOM元素。

尝试：

self.prop('disabled', false); 

相反的：

self.disabled = false; 

编辑：

其实上面的代码试图重新ebable按钮。没有代码禁用该按钮。

我也认为你想马上进行验证。到setTimeout()调用应该仅仅是重新启用按钮，如下所示：

$('#send').click(function() { 
    var self = $(this); 

    // Disable the button. 
    self.prop('disabled', true); 

    // Process click. 
    if (!$('#text').val()) { 
     alert('field empty'); 
    } else { 
     $('#message').html('done'); 
     $('#text').val(''); 
    } 

    // Cause the button to re-enable after 3 seconds. 
    setTimeout(function() { 
     self.prop('disabled', false); 
    }, 3000); 
});