点击提交按钮后禁用它，在几秒钟后再次启用它。

Question

点击提交按钮后禁用它，在几秒钟后再次启用它。

23

我在提交表单时使用了jQuery的$.post方法。我想在单击按钮后禁用该按钮约5秒钟，以避免多次提交表单。

目前我的做法如下：

$('#btn').click(function(){
    $.post(base_url + 'folder/controller/function',$('#formID').serialize(),function(data){
        $('#message').slideDown().html('<span>'+data+'</span>');
    });
});

我之前用过fadeIn和fadeOut，但当我快速点击按钮测试时，它仍然没有起作用。我应该怎么做才能实现我想要的效果？

- Jetoox

$('input[type="submit"]').attr('disabled','disabled'); $('input[type="submit"]').removeAttr('disabled'); 使用此代码 - swapnesh

你有哪种类型的按钮？是 <input>/<button> 还是 <div>/<span>/<a>？ - VisioN

只是一个简单的输入类型按钮。 - Jetoox

6个回答

2

只需将以下代码放在包含提交按钮的页面的JS中：

<script type="text/javascript">
  $(document).ready(function(){
    $("input[type='submit']").attr("disabled", false);
    $("form").submit(function(){
      $("input[type='submit']").attr("disabled", true).val("Please wait...");
      return true;
    })
  })
</script>

源代码

- German

2

如果表单中有多个提交按钮，并且您想在服务器端获取按钮的名称，请参考@Teneff的答案。

<script type="text/javascript">
var fewSeconds = 5;
$('button').click(function(){
    var btn = $(this);
    var text = btn.text();
    setTimeout(function(){
        btn.prop('disabled', true);
        btn.text("Wait...");
    }, 10);
    setTimeout(function(){
        btn.prop('disabled', false);
        btn.text( text);
    }, fewSeconds*1000);
});
<script>

- Prahlad

1

请查看.success函数此处，这就是您需要的。

所以您要做的就是在单击时禁用按钮。

$('#btn').click(function(){
    $('#btn').attr('disabled', true);
    $.post(base_url + 'folder/controller/function', $('#formID').serialize(), function(data) {
        // code on completion here
        })
        .success(function() { 
           $('#btn').attr('disabled', false);
        })
    });
});

如果您的请求需要超过5秒才能返回，那么这种方式会更好。

- ncremins

我会试一下这个，看看它是否有效。非常感谢您的回复。 :) - Jetoox

我不确定您是否可以将对象传递给 $.post，如果 dataType 未定义，用户将不得不重新加载页面。 - Teneff

你说得没错，我需要编辑一下。应该使用.ajax而不是.post/.get - http://jquerybyexample.blogspot.com/2011/11/avoid-jquerypost-use-jqueryajax.html - ncremins

1

将任何形式的按钮值累加到一个变量中。将该值替换为“请稍候...”，并在5秒后将之前保存的变量返回并将其禁用。

    $('input[type=submit], input[type=button]').click(function(){
    var btn = $(this);
    var textd = btn.attr("value");
    btn.prop('disabled', true);
    btn.attr('value', 'Please wait...');
    setTimeout(function(){
    btn.prop('disabled', false);
    btn.attr('value', textd);
    }, fewSeconds*1000);
    });

- Akinlosotu Samuel Adeniyi

0

        $('#btn').live('click', function () {
            $(this).prop('disabled', true).delay(800).prop('disabled', false);
        });

//或者

 $('#btn').live('click', function () {
            var obj = $(this);
            obj.prop('disabled', true);
            $.post(base_url + 'folder/controller/function', $('#formID').serialize(), function (data) {
                $('#message').slideDown().html('<span>' + data + '</span>');
                obj.prop('disabled', false);
            });
        });

- Thulasiram

.delay() 仅延迟动画队列中的项目。 - Teneff

从 jQuery 1.7 开始，方法 .live() 已经被弃用。请使用 .on() 来绑定事件处理程序。来源 - Teneff

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Teneff · Accepted Answer

你可以像这样做你想做的事情：

var fewSeconds = 5;
$('#btn').click(function(){
    // Ajax request
    var btn = $(this);
    btn.prop('disabled', true);
    setTimeout(function(){
        btn.prop('disabled', false);
    }, fewSeconds*1000);
});

或者你可以使用jQuery的.complete()方法，在ajax接收到响应后执行：

$('#btn').click(function(){
    var btn = $(this);
    $.post(/*...*/).complete(function(){
        btn.prop('disabled', false);
    });
    btn.prop('disabled', true);

});

编辑: 这是一个示例，模拟3秒的服务器响应延迟。

编辑

即使答案已经8年了，但仍然受到关注并且jQuery变得越来越不流行，我认为值得添加一个没有jQuery的示例。

const fewSeconds = 3
 
document.querySelector('#btn').addEventListener('click', (e) => {
    e.target.disabled = true
  setTimeout(() => {
   e.target.disabled = false
  }, fewSeconds * 1000)
})

<input type='button' id="btn" value="click me" />