在本文中，我们将讨论如何使用 JavaScript 启用或禁用按钮。首先，我们将了解它在普通 JavaScript 中的工作原理，稍后我们将了解如何使用 jQuery 来实现它。
JavaScript 是网络的核心技术之一。大多数网站都使用它，并且所有现代网络浏览器都支持它，而不需要插件。在本系列中，我们将讨论不同的提示和技巧，它们将帮助您进行日常 JavaScript 开发。
当您使用 JavaScript 时，您通常需要根据某些操作启用或禁用按钮。通常，当您使用表单时，您希望保持提交按钮处于禁用状态，直到用户填写表单中的所有必填字段。用户填写所有必填字段后，您希望自动启用它，以便用户可以单击按钮提交表单。
在 HTML 中，按钮元素有自己的状态，因此，您可以将其保持启用或禁用状态。例如，当加载表单时，您可以将按钮保持为禁用状态。稍后，您可以在 JavaScript 的帮助下启用它。
立即学习“Java免费学习笔记（深入）”；
今天，我们将通过几个实际示例讨论如何使用 JavaScript 启用或禁用按钮。
使用 Vanilla JavaScript 启用或禁用按钮
在本节中，我们将讨论一个实际示例，该示例演示如何使用普通 JavaScript 启用或禁用按钮。
让我们看一下下面的例子。
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; } } Username: Password:
在上面的示例中，我们构建了一个非常简单的表单，其中有几个文本字段和一个提交按钮。需要注意的是，加载表单后，提交按钮处于禁用状态。我们使用 disabled 属性将提交按钮的默认状态设置为禁用。
接下来，我们在用户名和密码输入字段上定义了 onchange 事件。因此，当用户更改这些字段的值时，就会触发 onchange 事件，该事件最终调用 toggleButton 函数。在 toggleButton 函数中，我们检查用户是否在两个必填字段中输入了值。如果是这种情况，我们将提交按钮的 disabled 属性设置为 false，这最终会启用提交按钮，以便用户可以单击该按钮。另一方面，如果用户名或密码字段为空，我们将 disabled 属性设置为 true，这将禁用提交按钮，以便用户无法单击它。
在上面的示例中，我们使用了输入提交按钮，但您也可以使用 HTML 按钮，如下例所示。
AppMall应用商店
AI应用商店，提供即时交付、按需付费的人工智能应用服务
56 查看详情 
Submit
这就是如何使用普通 JavaScript 来启用或禁用按钮。在下一节中，我们将了解如何使用 jQuery 库。
使用 jQuery 启用或禁用按钮
在本节中，我们将讨论如何借助 jQuery 库切换按钮的状态。
让我们修改一下上一节中讨论的示例。
function toggleButton() { var username = $('#username').val(); var password = $('#password').val(); if (username && password) { $('#submitButton').attr('disabled', false); } else { $('#submitButton').attr('disabled', true); } } Username: Password:
首先，我们已经加载了 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 启用或禁用按钮的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/537955.html
微信扫一扫 
支付宝扫一扫 
