使用jQuery提交后禁用按钮

Question

我知道有很多问题,但我尝试了几种解决方案,但没有任何效果.

在我的django应用程序中,我有一个表单:

<form method='post'>
    <button type='submit'>Send</button>
</form>

一旦用户提交表单,我就不会禁用该按钮.使用其他问题,我尝试了几件事,比如:

<button type='submit' onclick="this.disabled=true">Send</button>

单击时,该按钮被禁用...但表单未提交.每次尝试我都有同样的问题:按钮被禁用或表单已提交.我找不到两个怎么办......

我正在使用Chrome.我有这个问题的原因吗？谢谢您的帮助.

Answer 1

试试这个:

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

Answer 2

我喜欢这个,不必遍历DOM.将函数放在setTimeout函数上,这允许make submit和after disable按钮,即使setTimeout为0

$(document).ready(function () {
$("#btnSubmit").click(function () {
    setTimeout(function () { disableButton(); }, 0);
});

function disableButton() {
    $("#btnSubmit").prop('disabled', true);
}
});

Answer 3

试试，像这样，

  <input type="submit" value="Send" onclick="javascript=this.disabled = true; form.submit();">

Answer 4

您可以在父表单的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);
    });
}

Answer 5

像这样的事情可能会奏效。

<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>