Javascript 使用 jQuery 提交后禁用按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13606573/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable button after submit with jQuery
提问by Juliette Dupuis
I know there are a lot of questions about it, but I tried several solutions, and nothing works.
我知道有很多关于它的问题，但我尝试了几种解决方案，但没有任何效果。
In my django app I have a form:
在我的 Django 应用程序中，我有一个表单：
<form method='post'>
<button type='submit'>Send</button>
</form>
I wan't to disable the button once the user has submitted the form. Using other questions, I tried several things, like:
一旦用户提交了表单，我就不想禁用该按钮。使用其他问题，我尝试了几件事，例如：
<button type='submit' onclick="this.disabled=true">Send</button>
When I click, the button is disabled... but the form is not submitted. And for each try I had the same issue: either the button is disabled or the form is submitted. I can't find how to do both...
当我单击时，按钮被禁用...但未提交表单。对于每次尝试，我都遇到了同样的问题：按钮被禁用或表单被提交。我无法找到如何做到这两点...
I'm using Chrome. Any idea on why I have this problem? Thank you for your help.
我正在使用 Chrome。知道为什么我有这个问题吗？感谢您的帮助。
回答by Johann
Try this:
尝试这个：
$('form').submit(function() {
$(this).find("button[type='submit']").prop('disabled',true);
});
回答by Carlos E
I like this, don't have to traverse the DOM. Put function on a setTimeout function, this allows make submit and after disable button, even if setTimeout is 0
我喜欢这样，不必遍历DOM。将函数放在 setTimeout 函数上，即使 setTimeout 为 0，这也允许提交和禁用按钮之后
$(document).ready(function () {
$("#btnSubmit").click(function () {
setTimeout(function () { disableButton(); }, 0);
});
function disableButton() {
$("#btnSubmit").prop('disabled', true);
}
});
回答by Sampson
You could disable it upon the parent form's submitevent:
您可以在父表单的submit事件中禁用它：
$("form").on("submit", function () {
$(this).find(":submit").prop("disabled", true);
});
Be sure to run this code only after the HTMLFormElementhas been loaded, or else nothing will be bound to it. To ensure that the binding takes place, fire this off from within a document-readyblock:
请确保仅在HTMLFormElement加载后运行此代码，否则将不会绑定任何内容。为确保绑定发生，请从document-ready块内触发它：
// When the document is ready, call setup
$(document).ready(setup);
function setup () {
$("form").on("submit", function () {
$(this).find(":submit").prop("disabled", true);
});
}
回答by Gaz Winter
Something like this might work.
像这样的事情可能会奏效。
<button id="btnSubmit" type='submit'> Send </button>
<script>
$("#btnSubmit").on("click", function(e){
e.PreventDefault();
$(this).closest("form")[0].submit();
$(this).prop('disabled',true)
});
</script>
回答by Adem ?zta?
Try, like this,
试试，像这样，
<input type="submit" value="Send" onclick="javascript=this.disabled = true; form.submit();">
回答by geniv
my variant, disable button, no direct disabled but only vidible hidden:
我的变体，禁用按钮，没有直接禁用，但只有可见隐藏：
<input type="submit" name="namebutton" value="Nahrát obrázek" onclick="this.style.visibility='hidden';" ondblclick="this.style.visibility='hidden';"/>
回答by Fahim Parkar
How about this?
这个怎么样？
onclick="this.style.visibility='hidden';"
I would say, instead of disabled, hide it.
我会说，与其禁用，不如隐藏它。
If you want to go with disabled
如果你想和 disabled
onclick="this.style.disabled='true';"
回答by JunieL
You can do something like this. It is work fine with me.
你可以做这样的事情。这对我来说很好用。
<form method='post' onSubmit='disableFunction()'>
// your code here
</form>
Then in script, add this
然后在脚本中，添加这个
<script>
function disableFunction() {
$('#btn_submit').prop('disabled', true);
}
</script>
回答by ?oàn Anh Tú
You can do something like this. It is work fine with me.
你可以做这样的事情。这对我来说工作正常。
$("button#submitted").click(function () {
$("button#submitted").prop('disabled', true);
});
Double click on your button. This code will running
双击您的按钮。此代码将运行
回答by Fabio Caccamo
You must prevent the form from being submitted more than once, disabling the button is not the right solution because the form could be submitted in other ways.
您必须防止表单被多次提交，禁用按钮不是正确的解决方案，因为表单可以通过其他方式提交。
JavaScript:
JavaScript：
$('form').submit(function(e) {
// if the form is disabled don't allow submit
if ($(this).hasClass('disabled')) {
e.preventDefault();
return;
}
$(this).addClass('disabled');
});
Once the form is correctly disabled, you can customize its appearance.
正确禁用表单后，您可以自定义其外观。
CSS:
CSS：
form.disabled {
pointer-events: none;
opacity: 0.7;
}
