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

On my client-side page I attach a listener to the submit button:

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

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

and I'd like to disable the button and all other form input elements when the button is clicked:

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

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

The above function seems to swallow the event, and no form submit arrives at the server. However, if I remove the prop('disabled', true) then the form submits just fine, but also all form elements stay enabled and reactive.

上面的函数似乎吞下了这个事件,并且没有表单提交到达服务器。但是,如果我删除了prop('disabled',true),那么表单提交就好了,但是所有表单元素都保持启用和反应。

Why is that? I assumed that returning true will cause the event ev to continue propagating, whether or not the button is being disabled.

这是为什么?我假设返回true将导致事件ev继续传播,无论该按钮是否被禁用。

3 个解决方案

#1

Because the button element has been disabled the browser uses the disabled property to determine whether to fire the submit event. See the below example where the click event is triggered but the form is not submitted

由于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();

#2

Disable your form after form.submit.

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

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

#3

change

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

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

#1