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

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

这样的事情可能有用。

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

Answer 5

尝试，像这样，

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

Answer 6

这个怎么样？

onclick="this.style.visibility='hidden';"

我会说，而不是禁用，隐藏它。

如果您想使用disabled

onclick="this.style.disabled='true';"

Answer 7

我的变种，禁用按钮，没有直接禁用，只有隐藏的视频：

<input type="submit" name="namebutton" value="Nahrát obrázek"  onclick="this.style.visibility='hidden';" ondblclick="this.style.visibility='hidden';"/>

Answer 8

这最终成为我的最佳解决方案

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

Answer 9

我更喜欢这个：

<script>
    var submit = false;
    $('form').submit(function () {
        if (submit) { return false; }
        else { submit = true;}
    });
</script>

这样它也可以阻止回车键多次提交

Answer 10

我正在使用Chrome。我知道为什么会遇到这个问题？

好吧，我第一次处理这个问题时，我解决了这个问题：

private:
    __strong void (^callback)(MyState*);

这非常有效，但是......在Mozilla Firefox中。 Google Chrome未提交，因此我将其更改为：

function blockButtons() {
   $('button:submit').click(function(){
    $('button:submit').attr("disabled", true);
   });
}

然而，这在Mozilla Firefox中都有效，之后我们使用旧版本IE的一些用户遇到了两次提交的麻烦。也就是说，由javascript启动的那个，以及浏览器忽略onclick的事实并且无论如何只是提交。我猜这可以通过e.preventDefault修复。

Answer 11

如果您不想要双击某个元素，请使用.one（）

<button id="submit" type="submit">Send</button>
<script>
$(function () {
$("#submit").one("click", function () {
//enter your submit code
 });
});

.one()

Answer 12

在Chrome上遇到问题，没有提交表单。尝试了一堆不同的代码，这对我来说效果最好（看起来最好）：

  $('#form_id').submit(function() {
    $("input[type='submit']", this)
      .val("Please Wait...")
      .attr('disabled', 'disabled');
    return true;
  });

将 form_id 替换为表单的ID。课程也是如此：$('.form_class')

来源：JavaScript Coder

Answer 13

你可以这样做。这对我很好。

<form method='post' onSubmit='disableFunction()'>
// your code here
</form>

然后在脚本中添加此

<script>
function disableFunction() {
    $('#btn_submit').prop('disabled', true);
}
</script>

Answer 14

您可以执行以下操作。对我来说很好。

$("button#submitted").click(function () {
        $("button#submitted").prop('disabled', true);
});

双击您的按钮。该代码将运行

Answer 15

您必须防止多次提交表单，禁用按钮不是正确的解决方案，因为可以通过其他方式提交表单。

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

使用jQuery提交后禁用按钮

15 个答案: