Question

在我的客户端页面上，我将一个监听器附加到提交按钮：

alt

并且我想在点击按钮时禁用按钮和所有其他表单输入元素：

$(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继续传播，无论该按钮是否被禁用。

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;

禁用提交按钮取消提交活动？

3 个答案: