首頁  >  文章  >  web前端  >  比較 JavaScript 方法:使用 jQuery 與 Vanilla 啟用或停用按鈕

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

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

比较 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中文網其他相關文章!

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