javascript - 如何在 JavaScript 中更改按钮状态

Question

我需要在 Javacript 中编写一个函数来更新按钮颜色并在所有字段都有效时启用它。 请参见下图以了解用户与表单的交互

当管理员想要更新用户时，仅当满足以下条件时，更新按钮才需要为绿色

1. 至少启用一个编辑按钮。 (启用编辑按钮后，相应字段将被删除，用户可以写入内容)
2. 该字段必须实时验证
3. 如果我取消选中该字段，脚本必须重新验证其他打开的字段。例如，如果打开的字段为空，则按钮应为红色，但如果我关闭该字段，并且启用另一个字段并填充有效文本(假设只有 1 个字符表示有效)，则红色按钮应变为绿色

你能帮我解决这个问题吗？我认为一种解决方案是使用 JQuery keyup 函数，但它仅限于一个字段。相反，我需要一些更全局化的东西。

在 JavaScript 中是否有一种方法可以创建一个全局按钮监听器，而不是对这种情况有用

此外，当我打开密码复选框时，会启用两个字段，并且仅当密码有效且与已确认的密码匹配时，该按钮才有效

请参阅下面的 jsp 页面的简要摘要

我省略了密码字段的小图标和代码的引导部分

<sf:form class="form-horizontal" 
         role="form" 
         id="formsubmit" 
         method="POST" 
         action="${pageContext.request.contextPath}/updateprofile"
         commandName="user">
          <sf:input type="text" class="form-control" value="${user.username}" path="username" readonly="true"></sf:input>

         <input type="checkbox" class="form-control" name="email-checkbox" checked />
         <sf:input id="emailInput" type="text" class="form-control" path="email" placeholder="Type Email" name="email" disabled="true" />

        <input type="checkbox" class="form-control" name="first-name-checkbox" checked />
        <sf:input id="nameInput" type="text" class="form-control" placeholder="Type First Name" path="firstName" name="firstName" disabled="true" />

        <input type="checkbox" class="form-control" name="last-name-checkbox" checked />
        <sf:input id="surnameInput" type="text" class="form-control" placeholder="Type Last Name" path="lastName" name="lastName" disabled="true" />

        <input type="checkbox" class="form-control" name="password-checkbox" checked />
        <input id="password" type="password" class="form-control" name="password" placeholder="Insert Password" disabled>
        <input id="confirmpassword" type="password" class="form-control" name="confirmpassword" placeholder="Confirm Password" disabled>
        <button id="updateUserBtn" type="submit" class="btn btn-danger" data-loading-text="Creating User..." disabled>Update User</button>
</sf:form>

我第一次尝试使用 javascript 如下，它仅适用于密码字段，但未与编辑按钮连接

$("input[type=password]").keyup(
            function() {
                var ucase = new RegExp("[A-Z]+");
                var lcase = new RegExp("[a-z]+");
                var num = new RegExp("[0-9]+");

                if ($("#password").val().length >= 8) {
                    $("#8char").removeClass("glyphicon-remove");
                    $("#8char").addClass("glyphicon-ok");
                    $("#8char").css("color", "#00A41E");
                } else {
                    $("#8char").removeClass("glyphicon-ok");
                    $("#8char").addClass("glyphicon-remove");
                    $("#8char").css("color", "#FF0004");
                }

                if (ucase.test($("#password").val())) {
                    $("#ucase").removeClass("glyphicon-remove");
                    $("#ucase").addClass("glyphicon-ok");
                    $("#ucase").css("color", "#00A41E");
                } else {
                    $("#ucase").removeClass("glyphicon-ok");
                    $("#ucase").addClass("glyphicon-remove");
                    $("#ucase").css("color", "#FF0004");
                }

                if (lcase.test($("#password").val())) {
                    $("#lcase").removeClass("glyphicon-remove");
                    $("#lcase").addClass("glyphicon-ok");
                    $("#lcase").css("color", "#00A41E");
                } else {
                    $("#lcase").removeClass("glyphicon-ok");
                    $("#lcase").addClass("glyphicon-remove");
                    $("#lcase").css("color", "#FF0004");
                }

                if (num.test($("#password").val())) {
                    $("#num").removeClass("glyphicon-remove");
                    $("#num").addClass("glyphicon-ok");
                    $("#num").css("color", "#00A41E");
                } else {
                    $("#num").removeClass("glyphicon-ok");
                    $("#num").addClass("glyphicon-remove");
                    $("#num").css("color", "#FF0004");
                }

                if ($("#password").val() == $("#confirmpassword").val()
                        && ($("#confirmpassword").val() != 0)) {
                    $("#pwmatch").removeClass("glyphicon-remove");
                    $("#pwmatch").addClass("glyphicon-ok");
                    $("#pwmatch").css("color", "#00A41E");
                } else {
                    $("#pwmatch").removeClass("glyphicon-ok");
                    $("#pwmatch").addClass("glyphicon-remove");
                    $("#pwmatch").css("color", "#FF0004");
                }

                if ($("#password").val().length >= 8
                        && ucase.test($("#password").val())
                        && lcase.test($("#password").val())
                        && num.test($("#password").val())
                        && $("#password").val() == $("#confirmpassword").val()
                        && ($("#confirmpassword").val() != 0)) {
                    $("#updateUserBtn").removeClass("btn-danger");
                    $("#updateUserBtn").addClass("btn-success");
                    $("#updateUserBtn").prop('disabled', false);
                } else {
                    $("#updateUserBtn").removeClass("btn-success");
                    $("#updateUserBtn").addClass("btn-danger");
                    $("#updateUserBtn").prop('disabled', true);
                }
            });

Answer 1

附加到 form 元素的 keyup 处理程序将被调用，用于其中任何具有 keyup 事件的字段。这是因为大多数事件都会通过其所有祖先冒泡，并且可以在任何级别监听。

根据要求提供小示例:)

$("form").keyup(
        function() {
            // your existing code here
        });

如果您只想针对特定输入进行更改，您可以使用附加到表单的委托(delegate)处理程序(此处理程序使用特定表单 ID):

$("#formsubmit").on('keyup', 'input[type=text],input[type=password]',
        function() {
            // your existing code here
        });

这在事件时应用选择器，因此非常高效，并且还意味着 this 值将是更改的控件(如果这对您有用)。

作为一般的 jQuery 指南，仅运行选择器一次并保存元素。这更快更短并且通常更具可读性。您还可以将大多数 jQuery 函数链接在一起。

例如

 var $password = $("#password");
 var $8char = $("#8char");

 if ($password.val().length >= 8) {
        $8char.removeClass("glyphicon-remove").addClass("glyphicon-ok").css("color", "#00A41E");