我有一个需要服务器处理一段时间的表单。我需要确保用户等待并且不会尝试通过再次单击按钮来重新提交表单。我尝试使用以下 jQuery 代码：
<script type="text/javascript">
$(document).ready(function() {
$("form#my_form").submit(function() {
$('input').attr('disabled', 'disabled');
$('a').attr('disabled', 'disabled');
return true;
});
});
</script>
当我在 Firefox 中尝试此操作时，所有内容都被禁用，但表单未与它应该包含的任何 POST 数据一起提交。我无法使用 jQuery 提交表单，因为我需要将按钮与表单一起提交，因为有多个提交按钮，并且我确定 POST 中包含哪个值。我需要像往常一样提交表单，并且我需要在发生这种情况后立即禁用所有内容。
谢谢！
2018 年更新：我刚刚从这个旧答案中得到了一些分数，只是想补充一点，最好的解决方案是使操作具有幂等性，以便重复提交无害。
例如，如果表单创建了一个订单，则在表单中放置一个唯一的 ID。服务器第一次看到具有该 id 的订单创建请求时，它应该创建它并响应“成功”。随后的提交也应该响应“成功”（以防客户没有得到第一个响应）但不应该改变任何东西。
应通过数据库中的唯一性检查来检测重复项，以防止出现竞争条件。
我认为你的问题是这一行：
$('input').attr('disabled','disabled');
您正在禁用所有输入，包括，我猜，表单应该提交其数据的那些。
要仅禁用提交按钮，您可以这样做：
$('button[type=submit], input[type=submit]').prop('disabled',true);
但是，我认为即使这些按钮被禁用，IE 也不会提交表单。我建议采用不同的方法。
我们刚刚用下面的代码解决了这个问题。这里的技巧是使用 jQuerydata()来标记表单是否已经提交。这样，我们就不必弄乱提交按钮，这让 IE 感到害怕。
// jQuery plugin to prevent double submission of forms
jQuery.fn.preventDoubleSubmission = function() {
$(this).on('submit',function(e){
var $form = $(this);
if ($form.data('submitted') === true) {
// Previously submitted - don't submit again
e.preventDefault();
} else {
// Mark it so that the next submit can be ignored
$form.data('submitted', true);
}
});
// Keep chainability
return this;
};
像这样使用它：
$('form').preventDoubleSubmission();
如果有应该允许每次页面加载多次提交的AJAX 表单，您可以给它们一个指示这一点的类，然后将它们从您的选择器中排除，如下所示：
$('form:not(.js-allow-double-submission)').preventDoubleSubmission();
计时方法是错误的 - 你怎么知道客户端浏览器上的操作需要多长时间？
$('form').submit(function(){
$(this).find(':submit').attr('disabled','disabled');
});
提交表单时，它将禁用其中的所有提交按钮。
请记住，在 Firefox 中，当您禁用按钮时，该状态将在您返回历史记录时被记住。例如，为了防止您必须在页面加载时启用按钮。
我认为 Nathan Long 的答案是要走的路。对我来说，我使用的是客户端验证，所以我只添加了表单有效的条件。
编辑：如果没有添加，如果客户端验证遇到错误，用户将永远无法提交表单。
// jQuery plugin to prevent double submission of forms
jQuery.fn.preventDoubleSubmission = function () {
$(this).on('submit', function (e) {
var $form = $(this);
if ($form.data('submitted') === true) {
// Previously submitted - don't submit again
alert('Form already submitted. Please wait.');
e.preventDefault();
} else {
// Mark it so that the next submit can be ignored
// ADDED requirement that form be valid
if($form.valid()) {
$form.data('submitted', true);
}
}
});
// Keep chainability
return this;
};
event.timeStamp在 Firefox 中不起作用。返回 false 是非标准的，您应该调用event.preventDefault(). 当我们这样做时，请始终使用带有控制结构的大括号。
总结所有以前的答案，这里有一个插件可以完成工作并跨浏览器工作。
jQuery.fn.preventDoubleSubmission = function() {
var last_clicked, time_since_clicked;
jQuery(this).bind('submit', function(event) {
if(last_clicked) {
time_since_clicked = jQuery.now() - last_clicked;
}
last_clicked = jQuery.now();
if(time_since_clicked < 2000) {
// Blocking form submit because it was too soon after the last submit.
event.preventDefault();
}
return true;
});
};
为了解决 Kern3l，计时方法对我有用，因为我们试图停止双击提交按钮。如果您对提交的响应时间很长，我建议用微调器替换提交按钮或表单。
完全阻止表单的后续提交，就像上面的大多数例子一样，有一个不好的副作用：如果出现网络故障并且他们想尝试重新提交，他们将无法这样做并且会丢失他们所做的更改制成。这肯定会让用户生气。
请查看jquery-safeform插件。
用法示例：
$('.safeform').safeform({
timeout: 5000, // disable next submission for 5 sec
submit: function() {
// You can put validation and ajax stuff here...
// When done no need to wait for timeout, re-enable the form ASAP
$(this).safeform('complete');
return false;
}
});