JavaScript 禁用按钮单击

Anika Tabassum Era 2024年2月15日

JavaScript JavaScript Button

使用 JavaScript disabled 属性禁用按钮单击
使用 jQuery disabled 属性禁用按钮单击

在 JavaScript 中，disabled 属性仅适用于以 type="submit" 为根的按钮。否则，它不会像一个提交按钮那样起作用；相反，它将接受多个提交。

类似地，jQuery 属性 disabled 适用于具有 submit 类型的按钮。另外，表单提交方法在这方面非常重要。

在我们的示例集中，我们将看到 JavaScript disabled 属性和 jQuery disabled 属性的实现。

使用 JavaScript `disabled` 属性禁用按钮单击

通常，我们定义一个表单及其方法来确保提交的目的。无论如何，JavaScript 的属性 disabled 让我们可以让按钮处于非活动状态。

在这里，我们将启动一个表示 submit 类型的 input 字段。稍后获取 input 标签的实例，我们将触发 disabled 属性。

代码片段：

<body>
    <p>Click the button to submit data!</p>
    <p>
        <input type='submit' value='Submit' id='btClickMe'
            onclick='save();'>
    </p>
    <p id="msg"></p>
</body>
<script>
    function save() {
      var dis = document.getElementById('btClickMe').disabled = true;
        var msg = document.getElementById('msg');
        msg.innerHTML = 'Data submitted and the button disabled ☺';
    }
</script>
</html>

输出：

使用 jQuery `disabled` 属性禁用按钮单击

在 jQuery 中，我们将有一个类似的 disabled 属性用例。这里的区别是我们将在 form 标签内启动 input 字段（submit 类型按钮）。

我们将确保这是否也适用于表单。

代码片段：

<body>
<form id="fABC" action="#" method="POST">
    <input type="submit" id="btnSubmit" value="Submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input type="button" value="i am normal button" id="btnTest">
<script>
    $(document).ready(function () {
        $("#fABC").submit(function (e) {
            e.preventDefault();
            $("#btnSubmit").attr("disabled", true);
            $("#btnTest").attr("disabled", true);
            return true;
        });
    });
</script>

</body>
</html>