禁用sumbit上的按鈕並在提交後重新啓用

Question

我有一個腳本，通過ajax將數據提交到服務器，並且完美地工作。我想要實現的是在提交時禁用按鈕並在提交後重新啓用它。

$(document).ready(function(){ 
    $('.comment').on('submit',function(event){ 
     event.preventDefault(); 
     data = $(this).serialize(); 
     $.ajax({ 
     type: "POST", 
     url: "user_comment.php", 
     data: data 
     }).success(function(msg) { 
    $('#new_entry').html(msg); 

      $('.textbox').val(""); 

     }); 
    }); 
}); 

HTML

<form name="form1" method="post" action="" class="comment"> 
    <p> 
    <label for="comment"></label> 
    <textarea name="comment" id="comment"></textarea> 
    </p> 
    <p> 
    <input type="submit" name="button" id="button" value="Submit Comment"> 
    </p> 
</form> 

Answer 1

只要更新你的代碼中加入兩行以下並根據需要它會爲你工作。

$(document).ready(function(){ 
    $('.comment').on('submit',function(event){ 
     event.preventDefault(); 
     data = $(this).serialize(); 
     $("#button").prop('disabled',true); // disable 
     $.ajax({ 
     type: "POST", 
     url: "user_comment.php", 
     data: data 
     }).success(function(msg) { 
    $('#new_entry').html(msg); 

      $('.textbox').val(""); 
      $("#button").prop('disabled',false); // enable 



     }); 
    }); 
}); 

僅供參考 - http://api.jquery.com/prop/

Answer 2

您可以使用prop()像

$(document).ready(function() { 
    $('.comment').on('submit', function(event) { 
     $('#button').prop('disabled', true); 
     event.preventDefault(); 
     data = $(this).serialize(); 
     $.ajax({ 
      type: "POST", 
      url: "user_comment.php", 
      data: data 
     }).success(function(msg) { 
      $('#button').prop('disabled', false); 
      $('#new_entry').html(msg); 
      $('.textbox').val(""); 
     }); 
    }); 
}); 

Answer 3

您是否嘗試過設置的功能（this.attr('disabled','disabled')）開始禁用ATTR併成功重新啓用（this.removeAttr('disabled')） ？

Answer 4

禁用點擊事件輸入。然後啓用jQuery Ajax的成功功能。

Answer 5

我會嘗試以下方法：下面的代碼

$(document).ready(function(){ 
    $('.comment').on('submit',function(event){ 
     document.getElementById("button").disabled = true; 
     event.preventDefault(); 
     data = $(this).serialize(); 
     $.ajax({ 
     type: "POST", 
     url: "user_comment.php", 
     data: data 
     }).success(function(msg) { 
     document.getElementById("button").disabled = false; 
    $('#new_entry').html(msg); 
      $('.textbox').val(""); 
     }); 
    }); 
}); 

Answer 6

嘗試。用戶阿賈克斯beforeSend event爲

$(document).ready(function() { 
    $('.comment').on('submit', function (event) { 
     event.preventDefault(); 
     data = $(this).serialize(); 
     $.ajax({ 
      type: "POST", 
      url: "user_comment.php", 
      data: data 
      beforeSend: function() { 
       $('#button').attr('disabled', true); 
      }, 
      success: function() { 
       $('#button').attr('disabled', false); 
       $('#new_entry').html(msg); 
       $('.textbox').val(""); 
      }); 
     }); 
    }); 

Answer 7

如果你這樣做是爲了防止雙帖，失效按鈕是不是做正確的事。你必須始終做到在你的代碼，而不是僅僅在DOM：

$(document).ready(function(){ 
    $('.comment').on('submit',function(event){ 
     event.preventDefault(); 
     if ($('.comment').data('isWaiting')) { 
      return; 
     } 
     data = $(this).serialize(); 
     $.ajax({ 
      type: "POST", 
      url: "user_comment.php", 
      data: data 
     }).success(function(msg) { 
      $('#new_entry').html(msg); 
      $('.textbox').val(""); 
      $('.comment').data('isWaiting', false); 
     }); 
     $('.comment').data('isWaiting', true); 
    }); 
}); 

Answer 8

$(document).ready(function() { 
    $('.comment').on('submit', function(event) {    
     event.preventDefault(); 
     var button = $('#button'); 
     button.prop('disabled', true); 
     data = $(this).serialize(); 
     $.ajax({ 
      type: "POST", 
      url: "user_comment.php", 
      data: data 
     }).success(function(msg) { 
      button.prop('disabled', false); 
      $('#new_entry').html(msg); 
      $('.textbox').val(""); 
     }); 
    }); 
});