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

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);
    });

我的脚本的目的是禁用提交按钮，并在模型无效或用户更改表单值时重新启用它们。以上脚本适用于IE＆amp; Firefox，但在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

我遇到了同样的问题，谷歌浏览器在按钮 禁用时通过 jQuery触发了我的提交事件

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

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

因此，此代码适用于 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);