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

在我的客戶端頁面附上一個監聽器提交按鈕：禁用提交按鈕取消提交事件？

$(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繼續傳播，無論是否禁用按鈕。

來源

2016-05-13 Jens

而不是禁止輸入，你可以把它們放到一個只讀狀態這裏提到：http://stackoverflow.com/questions/7730695/whats-the-difference-between-disabled-disabled-and-只讀 - 只讀換HT。它應該如下：'$（'form'）。find（'input，select，textarea，button'）。prop（'readonly'，true）.blur（）;'。也許這將阻止用戶更改內容，但允許請求繼續處理？... – War10ck

我不想發佈此作爲答案，因爲它不能真正回答手頭的問題。但是，作爲一種解決方法，您可以用'$（'form'）。submit（）'替換'return true'。不再禁用按鈕後，我會得到與您相同的結果。我認爲這是爲了防止意外發生的提交。 –

變化

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

到

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

來源

2016-05-13 19:21:46 seahorsepip

可能再次看看這些問題：他正在使用「按鈕」;） –

這不包括提交按鈕被禁用。這是否意味着禁用'submit'按鈕會取消表單？ – Jens

由於按鈕元素已被禁用瀏覽器中使用禁用的屬性，以確定是否激發提交事件。請參閱下面的示例，其中點擊事件被觸發但表單未提交

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

來源

2016-05-13 19:49:23 42shadow42

因此事件_does_傳播，但瀏覽器取消提交，因爲現在禁用了「提交」按鈕......？ – Jens

這就是我理解它的方式是 – 42shadow42

根據[此線程]，您是正確的（http://stackoverflow.com/questions/7730695/whats-the-difference-between-disabled-disabled-and-readonly-readonly- for-ht＃7730719）:) – Jens

在form.submit後禁用您的表單。

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

來源

2016-05-13 21:14:52

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

回答

相關問題