23

フォームを送信するときに jquery $.post を使用しています。フォームの複数回の送信を避けるために、ボタンをクリックしてから 5 秒ほどボタンを無効にしたいと考えています。

これが私が今やったことです：

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

以前にフェードインとフェードアウトを使用したことがありますが、ボタンをすばやくクリックしてテストしたところ、まだ機能しません。なりたい自分を叶えるにはどうしたらいい？

4

6 に答える 6

50

次のように、やりたいことを実行できます。

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

.complete()または、ajax が応答を受信した後に実行されるjQuery のメソッドを使用できます。

$('#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" />

于 2012-06-07T13:30:58.257 に答える
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>

コードソース

于 2016-09-02T14:10:27.540 に答える
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秒以上かかる場合はどうなるので、この方法の方が優れていますか？

于 2012-06-07T13:34:39.243 に答える
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);
            });
        });
于 2012-06-07T13:36:17.933 に答える