如何使用JavaScript启用或禁用按钮：jQuery与Vanilla

如何使用JavaScript 启用或禁用按钮：jQuery与Vanilla 第1张

在本文中，我们将讨论如何使用 javascript 启用或禁用按钮。首先，我们将了解它在 vanilla JavaScript 中的工作原理，稍后我们将了解如何使用 jquery 来实现。

javaScript 是 Web 的核心技术之一。大多数网站都使用它，所有现代网络浏览器都支持它，无需插件。在本系列中，我们将讨论有助于您进行日常 JavaScript 开发的不同技巧和窍门。

使用 JavaScript 时，通常需要根据某些操作启用或禁用按钮。通常，当您使用表单时，您希望保持禁用提交按钮，直到用户填写表单中的所有必填字段。一旦用户填写了所有必填字段，您希望自动启用它，以便用户可以单击按钮提交表单。

在 html 中，按钮元素有自己的状态，因此，您可以将其保持为启用或禁用。例如，当加载表单时，您可以将按钮保持在禁用状态。稍后，您可以在 JavaScript 的帮助下启用它。

今天，我们将通过几个实际示例讨论如何使用 JavaScript 启用或禁用按钮。

使用 Vanilla JavaScript 启用或禁用按钮

在本节中，我们将讨论一个真实的示例，该示例演示如何使用 vanilla 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/>提交</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 库，以便我们可以在我们的函数中使用它。上面例子中唯一的不同是我们使用attr了 jQuery 对象的方法来改变按钮的状态。

jQuery 对象的attr方法用于设置或获取元素特定属性的值。如果您仅将它与单个参数一起使用，则它用于获取属性的值。另一方面，如果您将它与两个参数一起使用，则它用于设置属性的值。在我们的例子中，我们使用它来设置disabled按钮属性的值。除此之外，一切都一样。

如果您使用的是 jQuery 1.5+，则需要使用prop方法而不是attr方法，如以下代码段所示。

//...$('#submitButton').prop('disabled', true);

或者，如果要删除元素的任何属性，也可以使用removeAttrjQuery 对象的方法，如以下代码段所示。disabled与将属性设置为的结果相同false。

//...$('#submitButton').removeAttr('disabled');

因此，这些是您可以使用 jQuery 启用或禁用按钮的不同方式。

结论

今天，我们通过几个实际示例讨论了如何在 JavaScript 中启用或禁用按钮。除了原生 JavaScript，我们还讨论了如何借助 jQuery 库来实现它。

文章目录

使用 Vanilla JavaScript 启用或禁用按钮

使用 jQuery 启用或禁用按钮

结论

使用 Vanilla JavaScript 启用或禁用按钮

使用 jQuery 启用或禁用按钮

结论

相关推荐

最新文章 | 热门文章 | 随机文章