所属分类：web前端开发
在本文中，我们将讨论如何使用 JavaScript 启用或禁用按钮。首先，我们将了解它在普通 JavaScript 中的工作原理，稍后我们将了解如何使用 jQuery 来实现它。
JavaScript 是网络的核心技术之一。大多数网站都使用它，并且所有现代网络浏览器都支持它，而不需要插件。在本系列中，我们将讨论不同的提示和技巧，它们将帮助您进行日常 JavaScript 开发。
当您使用 JavaScript 时，您通常需要根据某些操作启用或禁用按钮。通常，当您使用表单时，您希望保持提交按钮处于禁用状态，直到用户填写表单中的所有必填字段。用户填写所有必填字段后，您希望自动启用它，以便用户可以单击按钮提交表单。
在 HTML 中，按钮元素有自己的状态，因此，您可以将其保持启用或禁用状态。例如，当加载表单时，您可以将按钮保持为禁用状态。稍后，您可以在 JavaScript 的帮助下启用它。
今天，我们将通过几个实际示例讨论如何使用 JavaScript 启用或禁用按钮。
在本节中，我们将讨论一个实际示例，该示例演示如何使用普通 JavaScript 启用或禁用按钮。
让我们看一下下面的例子。
微博登录
QQ登录<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 库来实现它。
