单击时禁用提交按钮将阻止在Google Chrome上提交表单

我在我的asp.net mvc里面的布局视图中添加了以下脚本： –

$(document).ready(function () { $('.btn.btn-primary').click(function () { $(this).prop("disabled", true); if (!$('form').valid()) { $(this).prop("disabled", false); return false; } }); $('form').change(function () { $('.btn.btn-primary').prop("disabled", false); }); 

我的脚本的目的是禁用提交按钮，并在模型无效或用户更改表单值时重新启用它们。 上述脚本在IE和Firefox上运行良好，但在Chrome上我无法提交表单，因为当用户点击提交按钮时，该按钮将被禁用，但表单将不会被提交。 知道如何在Chrome上解决这个问题吗？

Answer 1

而是在按钮的单击事件中禁用按钮 – 在表单的提交事件中禁用它（您也可以在那里检查表单的有效性）。

这样它将在所有浏览器中普遍使用。

 
  
 $('form').submit(function() { $('input.btn-primary').prop("disabled", "disabled"); }) 

Answer 2

我刚刚遇到了同样的问题，当按钮被jQuery 禁用时， 谷歌浏览器没有激活我的提交事件。

背景信息：我有一个带有按钮的表单，只要单击该按钮就会被禁用。 因此PHP提交代码不会被多次调用。 该提交正在Drupal后端运行，在我的例子中是一个自定义的submit_hook 。 但肯定在任何其他CMS工作。 但那不是问题。 真正的问题是，Javascript代码正在禁用该按钮，而Google Chrome认为该按钮已完全耗尽，而不仅仅是已禁用。 所以它不再触发任何代码。

但是这个问题很容易解决。

所以这段代码适用于Firefox / IE ：

 (function($) { Drupal.behaviors.somebehaviour = { attach: function(context, settings) { $('#edit-submit').click(function (e) { $('#edit-submit').val('Is saved...'); $('#edit-submit').prop('disabled', 'disabled'); }); } }; })(jQuery); 

并让它在Chrome上运行，您需要添加以下行：

 $(this).parents('form').submit(); 

所以对于这个例子，它最终将是：

 (function($) { Drupal.behaviors.somebehaviour = { attach: function(context, settings) { $('#edit-submit').click(function (e) { $('#edit-submit').val('Is saved...'); $('#edit-submit').prop('disabled', 'disabled'); $(this).parents('form').submit(); }); } }; })(jQuery);