在表单提交上禁用提交button
我写了这个代码来禁用点击后在我的网站上提交button：
$('input[type=submit]').click(function(){ $(this).attr('disabled', 'disabled'); }); 不幸的是，它不发送表单。 我怎样才能解决这个问题？
编辑我想绑定提交，而不是forms:)
做onSubmit() ：
$('form#id').submit(function(){ $(this).find(':input[type=submit]').prop('disabled', true); });
发生了什么事是你真正触发提交事件之前完全禁用button。
你也应该考虑用ID或CLASSes来命名你的元素，所以你不要在页面上select所有提交types的input。
示范： http : //jsfiddle.net/userdude/2hgnZ/
（请注意，我使用了preventDefault()并return false因此表单在示例中不会实际提交;请在您的使用中将其closures。
具体来说，如果有人在Chrome中遇到问题
你需要做什么来解决这个问题是使用元素中的onSubmit标签来设置提交button被禁用。 这将允许Chrome在按下button后立即禁用button，表单提交仍将继续。
例如
<form name ="myform" method="POST" action="dosomething.php" onSubmit="document.getElementById('submit').disabled=true;"> <input type="submit" name="submit" value="Submit" id="submit"> </form>
禁用的控件不提交它们的值 ，这不会帮助知道用户是否单击保存或删除。
所以我将button的值存储在一个隐藏的提交。 隐藏的名称与button名称相同。 我通过button的名称来调用所有的button 。
例如<button type="submit" name="button" value="save">Save</button>
基于这个我在这里find。 只需将点击的button存储在一个variables中。
$(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函数。 使用或replace您自己的版本的IsNull或未定义等
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'); });
简单而有效的解决scheme是
<form ... onsubmit="myButton.disabled = true; return true;"> ... <input type="submit" name="myButton" value="Submit"> </form>
来源： 这里
如前所述，如果在提交button上添加了禁用属性，数据将不会被发送。
来自@Valamas的技巧可行，但我find了一个很容易实现的解决scheme：
$('#yourform').submit(function(){ $('#mySubmitButton').addClass('disabled'); });
你可以这样定义CSS中的禁用类：
.disabled{ cursor:not-allowed; }
这将与disabled =“disabled”一样，但对发送的数据没有影响。
如何禁用提交button
只需在onclick事件上调用一个函数，并返回true以提交，false则禁用提交。 或者在window.onload上调用一个函数，如：
window.onload = init();
并在init（）中做这样的事情：
var theForm = document.getElementById('theForm'); theForm.onsubmit = // what ever you want to do
你的代码实际上在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>
