【发布时间】：2011-04-17 02:32:20
【问题描述】：
我编写这段代码是为了在点击后禁用我网站上的提交按钮：
$('input[type=submit]').click(function(){
$(this).attr('disabled', 'disabled');
});
很遗憾，它不发送表单。我该如何解决这个问题？
编辑 我想绑定提交，而不是表单:)
【问题讨论】：
标签： javascript jquery
【发布时间】：2011-04-17 02:32:20
【问题描述】：
去做onSubmit():
$('form#id').submit(function(){
$(this).find(':input[type=submit]').prop('disabled', true);
});
发生的情况是您在按钮实际触发提交事件之前完全禁用它。
您可能还应该考虑使用 ID 或 CLASS 来命名您的元素，因此您不会选择页面上所有提交类型的输入。
演示： http://jsfiddle.net/userdude/2hgnZ/
（注意，我使用了preventDefault() 和return false，因此在示例中表单并没有实际提交；在您使用时不要使用它。）
【讨论】：
-
是的，其实我很想在页面中绑定ALL submit。所以我不介意以这种方式处理 ID 或 CLASS :) 尝试使用
$('input[type=submit]').submit(function()：表单已发送，但按钮不会再禁用... -
您需要将
submit()放在表单上，而不是输入。查看演示。 -
是的，它有效！唯一的问题是我在表单上有一个onSubmit 函数，所以那是通过jquery shadow 绑定的吧！我需要在我的原始函数上实现这个，或者改变整个调用！谢谢
-
我觉得奇怪的是我无法在提交时绑定点击事件，然后在表单提交上绑定:)
-
就我而言，我需要将其包装在 $(document).ready 中以使其正常工作。大概是显而易见的。不是很明显并且需要一些工作才能弄清楚的是，如果接收 POST（或 GET）的程序正在寻找提交按钮的值，如果它被禁用，那么它将不会包含在发布值。至少这是我的测试结果。
特别是如果有人在Chrome 中遇到问题：
您需要做的是使用<form> 元素中的onSubmit 标记来设置提交按钮disabled。这将允许 Chrome 在按下按钮后立即禁用该按钮，并且表单提交仍将继续...
<form name ="myform" method="POST" action="dosomething.php" onSubmit="document.getElementById('submit').disabled=true;">
<input type="submit" name="submit" value="Submit" id="submit">
</form>
【讨论】：
-
这不是大部分开发者想要的。 Javascript 内容不应内嵌在 HTML 代码中。可能使用
.on('submit', function() {..})（或.submit(function() {..})）会更好。即使在这种情况下，您在从回调内部重新触发表单上的.submit()时可能会遇到问题，陷入无限循环（至少在我正在使用的最新版本的 Opera 上，它应该使用与 Chrome 相同的引擎）。 -
这正是我想要的。一个简单的内联，不需要外部库，即使 JavaScript 被禁用也不会进入。
-
在带有 JQuery 验证的表单上对此进行了测试，如果验证失败，该表单将阻止提交，最终提交按钮仍被此答案禁用。
禁用的控件不提交其值，这无助于了解用户是否单击了保存或删除。
所以我将按钮值存储在一个确实被提交的隐藏文件中。隐藏的名称与按钮名称相同。我将所有按钮都称为button。
例如<button type="submit" name="button" value="save">Save</button>
基于此，我找到了here。只需将单击的按钮存储在变量中即可。
$(document).ready(function(){
var submitButton$;
$(document).on('click', ":submit", function (e)
{
// you may choose to remove disabled from all buttons first here.
submitButton$ = $(this);
});
$(document).on('submit', "form", function(e)
{
var form$ = $(this);
var hiddenButton$ = $('#button', form$);
if (IsNull(hiddenButton$))
{
// add the hidden to the form as needed
hiddenButton$ = $('<input>')
.attr({ type: 'hidden', id: 'button', name: 'button' })
.appendTo(form$);
}
hiddenButton$.attr('value', submitButton$.attr('value'));
submitButton$.attr("disabled", "disabled");
}
});
这是我的IsNull 函数。使用或替换您自己的版本来代替 IsNull 或 undefined 等。
function IsNull(obj)
{
var is;
if (obj instanceof jQuery)
is = obj.length <= 0;
else
is = obj === null || typeof obj === 'undefined' || obj == "";
return is;
}
【讨论】：
这应该在您的应用中处理它。
$(":submit").closest("form").submit(function(){
$(':submit').attr('disabled', 'disabled');
});
【讨论】：
-
应该改用
.prop("disabled", true)。
简单有效的解决办法是
<form ... onsubmit="myButton.disabled = true; return true;">
...
<input type="submit" name="myButton" value="Submit">
</form>
来源：here
【讨论】：
更简单的方法。 我已经尝试过了，对我来说效果很好：
$(':input[type=submit]').prop('disabled', true);
【讨论】：
-
这是做什么的？这如何帮助解决上述禁用按钮无法发送表单的问题？
-
这将阻止提交表单。即使按钮被禁用，提问者也希望表单继续提交。
想要同时提交按钮的值并防止双重表单提交？
如果你使用的是submit类型的按钮，并且想提交按钮的值，如果按钮被禁用就不会发生这种情况，你可以设置一个表单数据属性，然后测试。
// Add class disableonsubmit to your form
$(document).ready(function () {
$('form.disableonsubmit').submit(function(e) {
if ($(this).data('submitted') === true) {
// Form is already submitted
console.log('Form is already submitted, waiting response.');
// Stop form from submitting again
e.preventDefault();
} else {
// Set the data-submitted attribute to true for record
$(this).data('submitted', true);
}
});
});
【讨论】：
您的代码实际上适用于 FF，但不适用于 Chrome。
这适用于 FF 和 Chrome。
$(document).ready(function() {
// Solution for disabling the submit temporarily for all the submit buttons.
// Avoids double form submit.
// Doing it directly on the submit click made the form not to submit in Chrome.
// This works in FF and Chrome.
$('form').on('submit', function(e){
//console.log('submit2', e, $(this).find('[clicked=true]'));
var submit = $(this).find('[clicked=true]')[0];
if (!submit.hasAttribute('disabled'))
{
submit.setAttribute('disabled', true);
setTimeout(function(){
submit.removeAttribute('disabled');
}, 1000);
}
submit.removeAttribute('clicked');
e.preventDefault();
});
$('[type=submit]').on('click touchstart', function(){
this.setAttribute('clicked', true);
});
});
</script>
【讨论】：
如何禁用提交按钮
只需在 onclick 事件上调用一个函数并...返回 true 以提交，返回 false 以禁用提交。 或 在 window.onload 上调用一个函数，例如：
window.onload = init();
在 init() 中做这样的事情：
var theForm = document.getElementById(‘theForm’);
theForm.onsubmit = // what ever you want to do
【讨论】：
以下内容对我有用：
var form_enabled = true;
$().ready(function(){
// allow the user to submit the form only once each time the page loads
$('#form_id').on('submit', function(){
if (form_enabled) {
form_enabled = false;
return true;
}
return false;
});
});
如果用户尝试多次提交表单（通过单击提交按钮、按 Enter 等），这将取消提交事件
【讨论】：
我一直在使用 blockUI 来避免禁用或隐藏按钮上的浏览器不兼容。
http://malsup.com/jquery/block/#element
然后我的按钮有一个类自动按钮：
$(".autobutton").click(
function(event) {
var nv = $(this).html();
var nv2 = '<span class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></span> ' + nv;
$(this).html(nv2);
var form = $(this).parents('form:first');
$(this).block({ message: null });
form.submit();
});
那么表格是这样的：
<form>
....
<button class="autobutton">Submit</button>
</form>
【讨论】：
按钮代码
<button id="submit" name="submit" type="submit" value="Submit">Submit</button>
禁用按钮
if(When You Disable the button this Case){
$(':input[type="submit"]').prop('disabled', true);
}else{
$(':input[type="submit"]').prop('disabled', false);
}
注意：这次你的情况可能是多个，可能需要更多条件
【讨论】：
简单方法：
Javascript 和 HTML：
$('form#id').submit(function(e){
$(this).children('input[type=submit]').attr('disabled', 'disabled');
// this is just for demonstration
e.preventDefault();
return false;
});
<!-- begin snippet: js hide: false console: true babel: false --><form id="id">
<input type="submit"/>
</form>注意：在 chrome 和 edge 上完美运行。
【讨论】：
最简单的纯javascript解决方案是简单地禁用按钮：
<form id="blah" action="foo.php" method="post" onSubmit="return checkForm();">
<button id="blahButton">Submit</button>
</form>
document.getElementById('blahButton').disabled = true ;
它可以在有/没有onSubmit 的情况下使用。表单保持可见，但无法提交任何内容。
【讨论】：