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

在我的客户端页面附上一个监听器提交按钮：禁用提交按钮取消提交事件？

$(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

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

回答

相关问题