Question

我在提交表单时使用的是jquery $ .post。我想在点击按钮5秒钟后禁用该按钮，以避免多次提交表单。

这就是我现在所做的：

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

我之前使用过fadeIn和fadeOut，但是当我测试它快速点击按钮时它仍然不起作用。我该怎么做才能实现我想要的目标？

Answer 1

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

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

});

编辑 this is an example，服务器端响应延迟为3秒

Answer 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>

Code source

Answer 3

查看.success函数here这就是你需要的。

所以你要做的就是点击

上的禁用按钮

$('#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秒才能返回，那么这种方式会更好吗？

Answer 4

在@Teneff的扩展名中，如果表单中有多个提交按钮，并且您想在服务器端使用按钮的名称，则回答。

<script type="text/javascript">
var fewSeconds = 5;
$('button').click(function(){
    // Ajax request
    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>

Answer 5

采用任何形式的按钮并将其值累加到变量中。将该值替换为“ please wait ...”，并在5秒钟后将先前保存的变量传回并禁用为false。

    $('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);
    });

Answer 6

        $('#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);
            });
        });

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

6 个答案: