jQuery –单击后如何禁用提交按钮

2022-06-17 11:06:55

通常，用户喜欢几次单击“提交”按钮以确保确实单击了该按钮，从而导致出现双重表单提交问题。 常见的解决方案是在用户单击提交按钮后将其禁用。

1.启用/禁用提交按钮

1.1要禁用提交按钮，您只需要向提交按钮添加disabled属性。

$("#btnSubmit").attr("disabled", true);

1.2要启用禁用的按钮，请将disabled属性设置为false，或删除disabled属性。

$('#btnSubmit').attr("disabled", false);	
or
$('#btnSubmit').removeAttr("disabled");

2. jQuery完整示例

<!DOCTYPE html>
<html lang="en">

<body>
<h1>jQuery - How to disabled submit button after clicked</h1>

<form id="formABC" action="#" method="POST">
    <input type="submit" id="btnSubmit" value="Submit"></input>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<input type="button" value="i am normal abc" id="btnTest"></input>

<script>
    $(document).ready(function () {

        $("#formABC").submit(function (e) {

            //stop submitting the form to see the disabled button effect
            e.preventDefault();

            //disable the submit button
            $("#btnSubmit").attr("disabled", true);

            //disable a normal button
            $("#btnTest").attr("disabled", true);

            return true;

        });
    });
</script>

</body>
</html>

参考文献

  1. jQuery提交API
标签：jQuery提交按钮

翻译自:https://mkyong.com/jquery/how-to-disable-submit-button-after-clicked-with-jquery/

  • 作者：cyan20115
  • 原文链接：https://blog.csdn.net/cyan20115/article/details/106554859
    更新时间：2022-06-17 11:06:55