提交表单时禁用按钮的最简单方法是什么？

我一直试图找到“正确”的方法来防止双重提交表格。 SO上有很多相关的post，但没有一个对我来说很有用。 下面两个问题。

这是我的表格

  Send  

这是我第一次尝试禁用双提交：

 $(document).ready(function(){ $(".once-only").click(function(){ this.disabled = true; return true; }); }); 

这是这里建议的方法： 使用JS / Jquery发布后禁用按钮 。 该post表明提交元素必须是输入而不是按钮，但测试两者没有区别。 您可以使用这个小提琴自己尝试： http ： //jsfiddle.net/uT3hP/

如您所见，这会禁用该按钮，但也会阻止提交表单。 在提交元素是按钮和输入元素的情况下。

问题1：为什么此单击处理程序停止提交表单？

搜索更多我找到这个解决方案（ 当我禁用提交按钮以防止双击时 ， 为什么我的表单不发布？ ）

 if($.data(this, 'clicked')){ return false; } else{ $.data(this, 'clicked', true); return true; } 

你可以用这个小提琴来玩这个： http ： //jsfiddle.net/uT3hP/1/

这确实有效，但……

问题2：这是我们能做的最好的吗？

我认为这将是一件基本的事情。 方法1不起作用，方法2不起作用，但我不喜欢它并且感觉必须有一种更简单的方法。

Answer 1

你可以使用jQuery的submit（） 。 在这种情况下，它应该看起来像这样：

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

这是一个有效的jsFiddle（由Mike制作） – http://jsfiddle.net/gKFLG/1/ 。

如果您的提交按钮不是表单元素的直接子项，则需要使用find替换children 。 此外，您的提交按钮也可以是button元素而不是input元素。 例如，如果您使用的是Bootstrap水平表单，则会出现这种情况。 以下是该代码段的不同版本：

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

演示jsFiddle – http://jsfiddle.net/devillers/fr7gmbcy/

Answer 2

简单有效的解决方案是

 
 ...   

来源： 这里

Answer 3

同样我已经看过一些例子，这个例子允许你通过超时改变按钮被禁用的时间。 它也只触发表单提交而不是按钮点击事件，这最初引起了我一些问题。

  $('form').submit(function () { var button = $('#button'); var oldValue = button.value; var isDisabled = true; button.attr('disabled', isDisabled); setTimeout(function () { button.value = oldValue; button.attr('disabled', !isDisabled); }, 3000) }); 

Answer 4

您可以尝试使用以下代码：

 $(document).ready(function(){ $(".once-only").click(function(){ this.submit(); this.disabled = true; return true; }); }); 

Answer 5

这应该有所帮助：

 
  Send  

使用Javascript：

 $(document).ready(function(){ $("form.form-once-only").submit(function () { $(this).find(':button').prop('disabled', true); }); }