（客户端）禁用提交按钮的最佳方法是啥？
Posted
技术标签:
【中文标题】（客户端）禁用提交按钮的最佳方法是啥？【英文标题】：What is the best approach for (client-side) disabling of a submit button?（客户端）禁用提交按钮的最佳方法是什么？ 【发布时间】：2010-09-07 22:43:31 【问题描述】：详情：
仅在用户单击提交按钮后，但在回发到服务器之前禁用 ASP.NET 网络表单 (.NET 1.1) 更喜欢 jQuery（如果有的话） 必须在表单重新加载（即信用卡失败）时启用这不是我必须这样做的必要条件，但是如果有一种简单的方法可以做到这一点而无需进行太多更改，我会这样做。 （即如果没有简单的解决方案，我可能不会这样做，所以不要担心挖得太深）
【问题讨论】：
【参考方案1】：对于所有提交按钮，通过 JQuery，它会是：
$('input[type=submit]').click(function() this.disabled = true; );
或者在表单提交时这样做可能更有用：
$('form').submit(function()
$('input[type=submit]', this).attr("disabled","disabled");
);
但我认为，如果我们对上下文有更多了解，我们可以更好地回答您的问题。
如果这是一个 ajax 请求，那么您需要确保在成功或失败时再次启用提交按钮。
如果这是一个标准的 HTTP 表单提交（除了使用 javascript 禁用按钮）并且您这样做是为了防止同一表单的多次提交，那么您应该在代码中进行某种控制处理提交的数据，因为使用 javascript 禁用按钮可能不会阻止多次提交。
【讨论】：
【参考方案2】：你可以这样做：
$('form').submit(function()
$(this)
.find(":submit,:image") // get all the submit buttons
.attr( disabled : 'disabled' ) // disable them
.end() // go back to this form
.submit(function() // change the onsubmit to always reject.
return false;
)
;
);
这样做的好处：
它适用于您的所有表单和所有提交方法： 点击提交元素 按回车键，或 从其他代码调用form.submit()
它将禁用所有提交元素：
<input type="submit"/>
<button type="submit"></button>
<input type="image" />
真的很短。
【讨论】：
【参考方案3】：我猜你不希望他们在提交处理过程中多次点击提交按钮。
我的方法是完全隐藏按钮并显示某种状态指示器（动画 gif 等）。
这是一个非常人为的例子（它在技术上是原型，但我认为 jquery 版本会非常相似）：
<html>
<head>
<script type="text/javascript" src="include/js/prototype.js"></script>
<script type="text/javascript">
function handleSubmit()
$('submit').hide();
$('progressWheel').show();
return true;
</script>
</head>
<body>
<img src="include/images/progress-wheel_lg.gif" id="progressWheel" style="display:none;"/>
<input type="submit" name="submit" id="submit" value="Submit" onclick="handleSubmit();"/>
</body>
</html>
【讨论】：
+1 很有帮助，因为我需要在请求中发布的提交按钮值。禁用按钮意味着不发布值。【参考方案4】：在 JQuery 中：
$('#SubmitButtonID').click(function() this.disabled = true; );
【讨论】：
【参考方案5】：需要注意的是，您不应该在提交表单之前禁用该按钮。如果您在 OnClick 事件中使用 javascript 禁用按钮，您可能会丢失表单提交。
因此，我建议您使用 javascript 通过在其上方放置图像或将按钮移出可见范围来隐藏按钮。这应该允许表单提交正常进行。
【讨论】：
【参考方案6】：可以通过三种方式提交应涵盖的表单。使用 David McLaughlin 和 Jimmy 的建议。一个将禁用提交按钮表单元素，而另一个禁用基本的 HTML 表单提交。
第三，这些不会禁止 Javascript 执行 form.submit()。 OnSubmit="return false" 方法仅适用于用户单击提交按钮或在输入表单元素中按 Enter 时。客户端脚本也需要处理。
【讨论】：
【参考方案7】：怎么样
背后的代码：
btnContinue3.Attributes.Item("onclick") = "disableSubmit()"
Javascript：
function disableSubmit()
document.getElementById('btnContinue3').onclick = function()
alert('Please only click once on the submit button!'); return false;
;
这并不能解决如果回发超时会发生什么的问题，但除此之外它对我有用。
【讨论】：
以上是关于（客户端）禁用提交按钮的最佳方法是啥？的主要内容，如果未能解决你的问题，请参考以下文章
通过表单按钮在 laravel 中触发 php 脚本的最佳方法是啥？