javascript - jQuery提交表单然后禁用所有 'input[type="提交"]'防止重复提交

Question

我遇到了一个奇怪的问题，常见的解决方案似乎无法解决。当用户单击基于 html 的表单时，如果他们单击“保存”、“上一个”或“下一个”，就会提交该表单，我会遇到一些奇怪的行为。

<div class="form-tab-nav form-tab-nav-bottom">
  <input id="tab" name="tab" tabindex="25" type="hidden" value="3">
  <input name="commit" tabindex="26" type="submit" value="Save">
    <input id="prev_commit_bottom" name="prev_commit[bottom]" tabindex="27" type="submit" value="<< Prev">
  <input class="orange" id="next_commit_bottom" name="next_commit[bottom]" tabindex="28" type="submit" value="Next >>">
</div>

使用 jQuery 1.6.1:

$('form').submit(function() {
  $(this).find("input[type='submit']").prop('disabled',true);
});

这将禁用该按钮，因此不允许第二个发布请求，但它会禁用重定向。也就是说，单击“上一个”或“下一个”的行为与单击“保存”的行为相同。

Answer 1

因为您在提交之前禁用了表单，所以什么也不会发生。您必须设置超时以允许提交发生。

$('form').submit(function() {
    var after = $.proxy(function () {
        $(this).find("input[type='submit']").prop('disabled',true);
    },this);
    window.setTimeout(after,50);
});

或

$('form').submit(function() {
    var elems = $(this).find("input[type='submit']");
    var after = function () {
        elems.prop('disabled',true);
    };
    window.setTimeout(after,50);
});