Div 显示多次且按钮仍处于禁用状态答案

【问题标题】：Div showing multiple times and button still disabledDiv 显示多次且按钮仍处于禁用状态
【发布时间】：2018-06-28 16:44:30
【问题描述】：

有 2 个输入字段，一个用于编写新密码，一个用于确认新密码字段中写入的密码，我试图使显示 please enter the password above 的 div 显示在确认密码文本框下方和当值不等于新密码字段的值时，提交按钮被禁用，但当它正确时删除错误div并启用提交按钮，但它不启用提交按钮并且不删除错误div ，它还多次显示错误div，请问我的错误是什么

......


    <label for="new-password" class="col-sm-4 col-form-label">New Password</label>

        <div class="col-sm-6">
            <input id="new-password" type="password" class="form-control new-p" name="new-password" required>
        </div>
        <div class="form-group row">
            <label for="new-password-confirm" class="col-sm-4 col-form-label">Confirm    New Password</label>
            <div class="col-sm-6">
                <input id="new-password-confirm" type="password" class="form-control confirm" name="new-password_confirmation" required>
                <div class='row' id="edit-profile-buttons">
                    <button type='submit' id="editUser" name="editUser">Change Password</button>
                </div>
            </div>
        </div>  
    </form>
    $(document).ready(function(){
        $('.confirm').on('change', function (e) {
           var test = $('.new-p').val();
            if ((e.target.value ===  test) && e.target.value != '' ){
                $(".confirm").parent().next(".error").remove(); 
                $("#editUser").removeAttr("disabled");
            }else
                alert(e.target.value);
            $(".confirm").parent().after("<div class='error' style='color:red;margin-bottom: 20px;'>Please enter the password you typed above</div>");
            $("#editUser").attr("disabled", "disabled");
        });
    });

【问题讨论】：

使用$("#editUser").prop("disabled", false); 启用和$("#editUser").prop("disabled", true); 禁用。这是一个布尔属性...
没用，我试过了

标签： javascript jquery html

【解决方案1】：

我认为您的 else 语句缺少括号：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
            crossorigin="anonymous"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $('.confirm').on('change', function (e) {
                var test = $('.new-p').val();
                if ((e.target.value === test) && e.target.value != '') {
                    debugger;
                    $(".confirm").parent().next(".error").remove();
                    $("#editUser").removeAttr("disabled");
                } else { //else do this whole thing
                    alert(e.target.value);
                $(".confirm").parent().after("<div class='error' style='color:red;margin-bottom: 20px;'>Please enter the password you typed above</div>");
                    $("#editUser").attr("disabled", "disabled");
                }
            });
        });
    </script>
</head>
<body>

    <form>
        <label for="new-password" class="col-sm-4 col-form-label">New Password</label>

        <div class="col-sm-6">
            <input id="new-password" type="password" class="form-control new-p" name="new-password" required>
        </div>
        <div class="form-group row">
            <label for="new-password-confirm" class="col-sm-4 col-form-label">Confirm New Password</label>
            <div class="col-sm-6">
                <input id="new-password-confirm" type="password" class="form-control confirm" 
                       name="new-password_confirmation" required>
                <div class='row' id="edit-profile-buttons">
                    <button type='submit' id="editUser" name="editUser">Change Password</button>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

【讨论】：

完全...。else 不在{ 和} 之间...它可以使用它。但是无论如何将.attr() 更改为.prop() 以获得更好的代码。 ;)

【解决方案2】：

这里有几个提示，向您展示解决方案的路径：

尝试使用input 事件而不是change
将您的应用程序状态提取到一个单独的对象中，并使用它进行比较。
将错误消息设为持久性 DOM 元素，根据密码比较打开或关闭该元素。

$(document).ready(function() {
  var state = {
    p1: "",
    p2: ""
  };
  
  $('#error').hide();
  $('#new-password').on('input', enter_value.bind(null, "p1"));
  $('#new-password-confirm').on('input', enter_value.bind(null, "p2"));
  
  function enter_value(value_name, event) {
    var new_value = event.target.value;
    state[value_name] = new_value;
    compare_values();
  }
  
  function compare_values() {
    if (state.p1 !== state.p2) {
      $('#error').show();
      $("#editUser").attr("disabled", "disabled");
      return;
    }
    $('#error').hide();
    $("#editUser").removeAttr("disabled");
  }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="new-password" class="col-sm-4 col-form-label">New Password</label>

                        <div class="col-sm-6">
                            <input id="new-password" type="password" class="form-control new-p" name="new-password" required></div>
<div class="form-group row">
<label for="new-password-confirm" class="col-sm-4 col-form-label">Confirm    New Password</label>
    <div class="col-sm-6">
    <input id="new-password-confirm" type="password" class="form-control confirm" name="new-password_confirmation" required>
<div class='row' id="edit-profile-buttons">
<button type='submit' id="editUser" name="editUser">Change Password</button>
<div id='error' style='color:red;margin-bottom: 20px;'>Please enter the password you typed above</div>
</div></form>

【讨论】：