在本文中,我們將討論如何使用 JavaScript 啟用或停用按鈕。首先,我們將了解它在普通 JavaScript 中的工作原理,稍後我們將了解如何使用 jQuery 來實現它。
JavaScript 是網路的核心技術之一。大多數網站都使用它,並且所有現代網頁瀏覽器都支援它,而不需要插件。在本系列中,我們將討論不同的提示和技巧,它們將幫助您進行日常 JavaScript 開發。
當您使用 JavaScript 時,您通常需要根據某些操作啟用或停用按鈕。通常,當您使用表單時,您希望保持提交按鈕處於停用狀態,直到使用者填寫表單中的所有必填欄位。用戶填寫所有必填欄位後,您希望自動啟用它,以便使用者可以點擊按鈕提交表單。
在 HTML 中,按鈕元素有自己的狀態,因此,您可以將其保持啟用或停用狀態。例如,當載入表單時,您可以將按鈕保持為停用狀態。稍後,您可以在 JavaScript 的幫助下啟用它。
今天,我們將透過幾個實際範例討論如何使用 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 函式庫切換按鈕的狀態。
讓我們修改一下上一節討論的範例。
<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中文網其他相關文章!