在这篇文章中，我们将讨论如何用JavaScript来启用或禁用一个按钮。首先，我们将了解它在vanilla JavaScript中是如何工作的，稍后我们将看到如何用jQuery来实现它。
JavaScript是网络的核心技术之一。大多数网站都使用它，而且所有现代网络浏览器都支持它，不需要插件。在这个系列中，我们将讨论不同的提示和技巧，这些提示和技巧将帮助你进行日常的JavaScript开发。
当你用JavaScript工作时，更多时候你需要根据一些动作来启用或禁用一个按钮。通常，当你在处理表单时，你想让提交按钮保持禁用状态，直到用户填完表单中的所有必填项。一旦用户填完了所有的必填项，你就想自动启用它，这样用户就可以点击按钮来提交表单。
在HTML中，一个按钮元素有它自己的状态，因此，你可以保持它的启用或禁用。例如，当一个表单被加载时，你可以将一个按钮保持在禁用状态。之后，你可以在JavaScript的帮助下启用它。
今天，我们将通过几个真实的例子来讨论如何用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>
所以，这就是你如何使用vanilla 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中启用或禁用一个按钮。除了vanilla JavaScript之外，我们还讨论了如何在jQuery库的帮助下实现它。
