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;

编辑：

实际上上面的代码试图重新设置按钮。没有代码可以禁用该按钮。

我还认为您想立即执行验证。对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);
});

禁用带超时的按钮

3 个答案: