首頁 >web前端 >js教程 >比較 JavaScript 方法：使用 jQuery 與 Vanilla 啟用或停用按鈕

比較 JavaScript 方法：使用 jQuery 與 Vanilla 啟用或停用按鈕

PHPz原創: 2023-08-28 17:05:09609瀏覽

比较 JavaScript 方法：使用 jQuery 与 Vanilla 启用或禁用按钮

在本文中，我們將討論如何使用 JavaScript 啟用或停用按鈕。首先，我們將了解它在普通 JavaScript 中的工作原理，稍後我們將了解如何使用 jQuery 來實現它。

JavaScript 是網路的核心技術之一。大多數網站都使用它，並且所有現代網頁瀏覽器都支援它，而不需要插件。在本系列中，我們將討論不同的提示和技巧，它們將幫助您進行日常 JavaScript 開發。

當您使用 JavaScript 時，您通常需要根據某些操作啟用或停用按鈕。通常，當您使用表單時，您希望保持提交按鈕處於停用狀態，直到使用者填寫表單中的所有必填欄位。用戶填寫所有必填欄位後，您希望自動啟用它，以便使用者可以點擊按鈕提交表單。

在 HTML 中，按鈕元素有自己的狀態，因此，您可以將其保持啟用或停用狀態。例如，當載入表單時，您可以將按鈕保持為停用狀態。稍後，您可以在 JavaScript 的幫助下啟用它。

今天，我們將透過幾個實際範例討論如何使用 JavaScript 啟用或停用按鈕。

使用 Vanilla JavaScript 啟用或停用按鈕

在本節中，我們將討論一個實際範例，該範例示範如何使用普通 JavaScript 啟用或停用按鈕。

讓我們來看看下面的例子。

<html>
    <head>
        <script>
            function toggleButton()
            {
                var username = document.getElementById('username').value;
                var password = document.getElementById('password').value;

                if (username && password) {
                    document.getElementById('submitButton').disabled = false;
                } else {
                    document.getElementById('submitButton').disabled = true;
                }
            }
        </script>
    </head>
    <body>
        <div>
            <form action="/submit.php" method="post">
                Username:<input type="text" name="username" id="username" onchange="toggleButton()">
                Password:<input type="password" name="password" id="password"  onchange="toggleButton()">
                <input id="submitButton" type="submit" value="Submit" disabled/>
            </form>
        </div>
    </body>
</html>

在上面的範例中，我們建立了一個非常簡單的表單，其中有幾個文字欄位和一個提交按鈕。需要注意的是，載入表單後，提交按鈕處於停用狀態。我們使用 disabled 屬性將提交按鈕的預設狀態設為停用。

接下來，我們在使用者名稱和密碼輸入欄位上定義了 onchange 事件。因此，當使用者更改這些欄位的值時，就會觸發 onchange 事件，該事件最終會呼叫 toggleButton 函數。在 toggleButton 函數中，我們檢查使用者是否在兩個必填欄位中輸入了值。如果是這種情況，我們將提交按鈕的 disabled 屬性設為 false，這最終會啟用提交按鈕，以便使用者可以點擊該按鈕。另一方面，如果使用者名稱或密碼欄位為空，我們將 disabled 屬性設為 true，這將停用提交按鈕，以便使用者無法點擊它。

在上面的範例中，我們使用了輸入提交按鈕，但您也可以使用 HTML 按鈕，如下例所示。

<button id="submitButton" disabled/>Submit</button>

這就是如何使用普通 JavaScript 來啟用或停用按鈕。在下一節中，我們將了解如何使用 jQuery 函式庫。

使用 jQuery 啟用或停用按鈕

在本節中，我們將討論如何使用 jQuery 函式庫切換按鈕的狀態。

讓我們修改一下上一節討論的範例。

<html>
    <head>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script>
        function toggleButton()
        {
            var username = $('#username').val();
            var password = $('#password').val();

            if (username && password) {
                $('#submitButton').attr('disabled', false);
            } else {
                $('#submitButton').attr('disabled', true);
            }
        }
    </script>
    </head>
    <body>
        <div>
            <form action="/submit.php" method="post">
                Username:<input type="text" name="username" id="username" onchange="toggleButton()">
                Password:<input type="password" name="password" id="password"  onchange="toggleButton()">
            <input id="submitButton" type="submit" value="Submit" disabled/>
            </form>
        </div>
    </body>
</html>

首先，我們已經載入了 jQuery 函式庫，以便我們可以在我們的函數中使用它。上面範例中唯一的差異是我們使用 jQuery 物件的 attr 方法來更改按鈕的狀態。

jQuery 物件的 attr 方法用於設定或取得元素的特定屬性的值。如果僅將其與單一參數一起使用，則它將用於取得屬性的值。另一方面，如果將它與兩個參數一起使用，則它用於設定屬性的值。在我們的例子中，我們使用它來設定按鈕的 disabled 屬性的值。除此之外，一切都是一樣的。

如果您使用的是 jQuery 1.5 ，則需要使用 prop 方法而不是 attr 方法，如下列程式碼片段所示。

//...
$('#submitButton').prop('disabled', true);

或者，如果要刪除元素的任何屬性，也可以使用 jQuery 物件的 removeAttr 方法，如下列程式碼片段所示。其結果與將 disabled 屬性設為 false 的結果相同。

//...
$('#submitButton').removeAttr('disabled');

這些是您可以使用 jQuery 啟用或停用按鈕的不同方法。

結論

今天，我們透過幾個實際範例討論如何在 JavaScript 中啟用或停用按鈕。除了普通 JavaScript 之外，我們還討論瞭如何使用 jQuery 函式庫來實現它。

以上是比較 JavaScript 方法：使用 jQuery 與 Vanilla 啟用或停用按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript jquery html 对象事件

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：簡單技巧：解析jQuery - Grep下一篇：簡單技巧：解析jQuery - Grep

看更多