禁用按鈕超時

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); 
});