2

我有此表单，其中包含在发布数据之前警告验证错误的条件。问题是，如果有人双击（可能是错误的），提交了表单，然后在第一次单击时清除了表单，然后第二次单击将警告“表单为空”，这可能会令人困惑，因为这一切都发生在一瞬间. 所以我想要的是在单击 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);
});
4

3 回答 3

8

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

工作演示

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('');
    }
});
于 2013-03-04T17:27:40.817 回答
2

您可以使用 jQueryone()代替click(). 一旦函数运行，它将被解除绑定。
如果要重新启用它，可以将超时重新绑定到函数末尾。

使用您的方法，您似乎从未真正禁用该按钮：

this.disabled = 'disabled';
于 2013-03-04T17:23:46.487 回答
2

您没有正确禁用该按钮。您.disabled在 jQuery 对象上设置属性，而不是包装的 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);
});
于 2013-03-04T17:24:56.587 回答