禁用提交按钮，当点击它，会阻止谷歌浏览器

Question

我已经添加下面的脚本到我的布局来看，提交我的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); 
    }); 

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

Answer 1

取消按钮的点击事件中的按钮 - 在表单的提交事件中禁用它（您也可以在表单中检查表单的有效性）。

这样它就可以在所有浏览器中普遍使用。

<form action="http://www.microsoft.com"> 
    <input class="btn-primary" type="submit" value="submit"/> 
</form> 


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

Answer 2

我有同样的问题，该谷歌浏览器没有fireing我提交事件时按钮通过jQuery的得到禁用。

背景信息：我有一个窗体，只要点击一下按钮就会被禁用。所以PHP提交代码不会被多次调用。该提交在Drupal后端运行，在我的情况下作为自定义submit_hook。但肯定可以在任何其他CMS中工作。 但这不是问题。真正的问题是Javascript代码禁用了按钮，Google Chrome认为按钮完全死机，而不仅仅是禁用。所以它不再触发任何代码。

但这个问题很容易解决。

因此，此代码工作火狐/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); 

，并得到它的铬运行，以及，你需要添加一行：

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