禁用提交按鈕會取消提交事件嗎？

Question

在我的客戶端頁面上，我在“提交”按鈕上附加了一個偵聽器：

$(function() {                                                                  
  $('button[type="submit"]').click(submitButtonClicked);                      
});                                                                             

並且我想在單擊按鈕時禁用按鈕和所有其他表單輸入元素：

function submitButtonClicked(ev) {                                              
  if ($(this).hasClass('disabled')) {                                           
    return false; // Reject actions when disabled, preventDefault() and stopPropagation()                          
  }                                                                           
  $('form').find('input, select, textarea, button')                       
           .prop('disabled', true) // This call is the culprit?
           .blur();                                                       
  return true; // Submit form.
}                                                                               

上面的功能似乎吞沒了事件，並且沒有表單提交到達服務器。 但是，如果我刪除了prop('disabled', true)那么表單提交就很好了，而且所有表單元素都保持啟用狀態和反應性。

這是為什么？ 我假設返回true將導致事件ev繼續傳播，而不管按鈕是否被禁用。

Answer 1

更改

$('form').find('input, select, textarea, button')

至

$('form').find('input:not([type=submit]), select, textarea, button')

Answer 2

因為button元素已被禁用，所以瀏覽器使用disabled屬性確定是否觸發Submit事件。 請參見以下示例，其中觸發了click事件，但未提交表單

$("#button").click(function()
{
    console.log("disabling");
    $("#button").prop("disabled", true);
    console.log("disabled");
    return true;
});

$("#form").submit(function(){
    console.log("Submit");
});

$("#button").click();
$("#button").click();

Answer 3

在form.submit之后禁用您的表單。

...
setTimeout(function(){
    $('form').find('input, select, textarea, button')                       
       .prop('disabled', true);}, 200);//setTimeout
return true;