在本文中，我們將討論如何使用 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中文網其他相關文章！
