Submit 버튼을 클릭한 후 비활성화하고 몇 초 후 다시 활성화합니다.

Submit 버튼을 클릭한 후 비활성화하고 몇 초 후 다시 활성화합니다.

저는 양식을 제출할 때 jquery $.post를 사용하고 있습니다.양식을 여러 번 제출하지 않기 위해 버튼을 클릭한 후 5초 정도 비활성화하고 싶습니다.

제가 지금 한 일은 이렇습니다.

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

페이드인과 페이드아웃을 사용한 적이 있는데, 빠르게 버튼을 눌러 테스트해보니 여전히 작동하지 않습니다.제가 하고 싶었던 일을 이루려면 어떻게 해야 할까요?

당신은 이렇게 당신이 하고 싶었던 일을 할 수 있습니다.

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

아니면 jQuery's를 사용할 수 있습니다..complete()ajax가 응답을 수신한 후 실행되는 메서드:

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

});

edit: 서버측 응답 지연이 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" />

제출 버튼이 있는 페이지의 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>

코드소스

@Tenff의 확장에서 양식에 여러 개의 제출 버튼이 있고 서버 측에 있는 버튼의 이름을 원할 경우 답변합니다.

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

여기에 필요한 .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초 이상 걸린다면 어떻게 되나요?

임의 형태의 버튼을 선택하여 값을 변수에 누적합니다.값을 "기다려주세요.."로 바꿉니다.." 그리고 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);
    });

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

언급URL : https://stackoverflow.com/questions/10932766/disable-the-submit-button-after-clicking-and-enable-it-back-again-after-a-few-se