暂时禁用提交按钮

Question

我有一个将大文件上传到服务器的表单。 像这样的东西：

<form id="myform" action="myaction.php">
  <p>
    <!--fields -->
  </p>
  <input type="submit" class="submit" value="Send" />
</form>

我需要防止用户在之前的处理尚未准备好时重新提交表单。 如何在处理之前禁用提交按钮并在提交操作后启用按钮？

Answer 1

尝试

$("input.submit").attr('disabled', 'disabled');

接着

$("input.submit").removeAttr('disabled');

Answer 2

从 1.6 版开始，在 jQuery 中执行此操作的正确方法是使用新的 prop() 方法。

同样重要的是您将事件附加到表单的提交事件，而不是提交按钮本身。 这样，如果有人在填写表格时按 Enter 键，就像我相信我们都一样，该按钮仍将被禁用。

正确代码：

$("#myform").submit(function() {
    $("#myform .submit").prop('disabled', true);
}

如果您真的想阻止对多次提交的表单的访问，您也可以停止提交表单，而不仅仅是禁用按钮：

var myform = $("#myform");
myform.submit(function() {
    if($.data(myform.get(0), 'submitting') {
        return false;
    }

    $.data(myform.get(0), 'submitting', true);
    $(".submit", myform).prop('disabled', true);
});

所有其他解决方案都是错误的::)

开个玩笑，它们也会起作用，但这会捕获更多异常逻辑并正确处理属性。

Answer 3

在他们单击元素后，您可以将属性disabled="true"添加到元素。

$('.submit').click(function(){$(this).attr('disabled',true)});

现场演示

Answer 4

在 JQuery 你可以这样做

$(".submit").click(function() {
  $(".submit").attr("disabled","disabled");
  //Post your form here..
});

Answer 5

您可以像这样在 jquery 中禁用：

$(".submit").attr("disabled","disabled");

Answer 6

假设您有 jQuery 可用。

<form id="myform" action="myaction.php" onsubmit="submitForm();">
  <p>
    <!--fields -->
  </p>
  <input id="submit_button" type="submit" class="submit" value="Send" />
</form>

<script>
    function submitForm(){
         $("#submit_button").attr("disabled","disabled");
    }
</script>

Answer 7

您可以像这样禁用双重表单提交：

<form id="myform" action="myaction.php" onsubmit="this.onsubmit=function(){return false;}">