我知道有很多关于它的问题，但我尝试了几种解决方案，但没有任何效果。
在我的 django 应用中，我有一个表单：
<form method='post'>
<button type='submit'>Send</button>
</form>
用户提交表单后，我不想禁用该按钮。使用其他问题，我尝试了几件事，例如：
<button type='submit' onclick="this.disabled=true">Send</button>
当我单击时，该按钮被禁用...但未提交表单。对于每次尝试，我都有同样的问题：按钮被禁用或表单已提交。我找不到怎么做这两个...
我正在使用 Chrome。知道为什么我有这个问题吗？感谢您的帮助。
【问题讨论】：
<button>正常发送表单，然后在成功提交表单后写一个script禁用按钮？
标签： javascript jquery django
这对我来说是最好的解决方案
$("form").submit(function disableSubmit() {
$("input[type=submit]", this).prop("disabled", true);
});
【讨论】：
您必须防止表单被多次提交，禁用按钮不是正确的解决方案，因为表单可以通过其他方式提交。
JavaScript：
$('form').submit(function(e) {
// if the form is disabled don't allow submit
if ($(this).hasClass('disabled')) {
e.preventDefault();
return;
}
$(this).addClass('disabled');
});
正确禁用表单后，您可以自定义其外观。
CSS：
form.disabled {
pointer-events: none;
opacity: 0.7;
}
【讨论】：
我喜欢这样，不必遍历 DOM。 将函数放在 setTimeout 函数上，这允许提交和禁用按钮后，即使 setTimeout 为 0
$(document).ready(function () {
$("#btnSubmit").click(function () {
setTimeout(function () { disableButton(); }, 0);
});
function disableButton() {
$("#btnSubmit").prop('disabled', true);
}
});
【讨论】：
你可以做这样的事情。对我来说很好用。
$("button#submitted").click(function () {
$("button#submitted").prop('disabled', true);
});
双击您的按钮。此代码将运行
【讨论】：
你可以做这样的事情。这对我来说很好。
<form method='post' onSubmit='disableFunction()'>
// your code here
</form>
然后在脚本中添加这个
<script>
function disableFunction() {
$('#btn_submit').prop('disabled', true);
}
</script>
【讨论】：
在 Chrome 上遇到问题，未提交表单。尝试了一堆不同的代码，这对我来说效果最好（并且看起来最好 imo）：
$('#form_id').submit(function() {
$("input[type='submit']", this)
.val("Please Wait...")
.attr('disabled', 'disabled');
return true;
});
将 form_id 替换为您的表单 ID。当然也可以上课：$('.form_class')
【讨论】：
如果您不想双击某个元素，请使用 .one()
<button id="submit" type="submit">Send</button>
<script>
$(function () {
$("#submit").one("click", function () {
//enter your submit code
});
});
【讨论】：
我正在使用 Chrome。知道我为什么会遇到这个问题吗？
好吧，我第一次处理这个问题时，我是这样解决的：
function blockButtons() {
$('button:submit').click(function(){
$('button:submit').attr("disabled", true);
});
}
这很好用，但是……在 Mozilla Firefox 中。谷歌浏览器没有提交，所以我改成这样：
function blockButtons() {
$('button:submit').click(function(){
var form = $(this).parents('form:first');
$('button:submit').attr("disabled", true);
$('button:submit').css('opacity', 0.5);
form.submit();
});
}
这在 Mozilla Firefox 中都有效，但是，之后我们的一些使用旧版本 IE 的用户遇到了两次提交的麻烦。也就是说，由 javascript 发起的一个，由浏览器发起的一个，忽略了 onclick 的事实，只是提交。我猜这可以通过 e.preventDefault 修复。
【讨论】：
我更喜欢这个：
<script>
var submit = false;
$('form').submit(function () {
if (submit) { return false; }
else { submit = true;}
});
</script>
这样还可以防止回车键多次提交
【讨论】：
我的变体，禁用按钮，没有直接禁用但只有可见隐藏：
<input type="submit" name="namebutton" value="Nahrát obrázek" onclick="this.style.visibility='hidden';" ondblclick="this.style.visibility='hidden';"/>
【讨论】：
试试，像这样，
<input type="submit" value="Send" onclick="javascript=this.disabled = true; form.submit();">
【讨论】：
您可以在父表单的 submit 事件中禁用它：
$("form").on("submit", function () {
$(this).find(":submit").prop("disabled", true);
});
请确保仅在加载 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);
});
}
【讨论】：
试试这个：
$('form').submit(function() {
$(this).find("button[type='submit']").prop('disabled',true);
});
【讨论】：
$(this).find('button[type="submit"],input[type="submit"]').prop('disabled', true);
这个怎么样？
onclick="this.style.visibility='hidden';"
我会说，与其禁用，不如隐藏它。
如果你想和disabled一起去
onclick="this.style.disabled='true';"
【讨论】：
这样的事情可能会奏效。
<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>
【讨论】：