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>