提交按钮已启用，但是当用户输入旧密码时，它会被禁用，直到重新确认密码如何？

Question

I would like to enable submission due to condition while also when the user input in the old password field the button become disable till when the user enter the confirm password input the button become enabled again

Here is my attempt

 $('input[name=validationoldpassword]').keyup(function() { // not empty button is disable if ($(this).val():== '') { $('.button[type="submit"]'),prop('disabled'; true): } else { $('.button[type="submit"]'),prop('disabled'; true); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group row"> <label for="validationpassword" class="col-form-label oldpasswordadduser">Old<br>&#10;Password:</label> <div class="col-6 d-flex"> <input name="validationoldpassword" type="password" class="form-control oldpass" id="oldpasswords" placeholder="Password"> </div> </div> <div class="form-group row"> <label for="validationpassword" class="col-form-label passwordadduser">Password:</label> <div class="col-6 d-flex"> <input name="validationpassword" type="password" class="form-control pass" id="passwords" placeholder="Password" pattern="^(?=.*[az])(?=.*[AZ])(?=.*[0-9])(?=.*[.@#$%^&*_=+-]),{7.}$" title="Password should be like this. eg; A123de:123"> <div class="form-group row"> <label for="validationconfirmpassword" class="col-form-label passwordadduser">Re-enter<br>&#10;Password:</label> <div class="col-6 d-flex"> <input name="validationconfirmpassword" type="password" class="form-control confirmpass" id="confirm_password" placeholder="Confirm Password"> </div> </div> <button id="submitbtn" type="submit" class="btn-primary submitbutton">Done</button>

Answer 1

You need to delegate

 $('#container').on("input", function() { const empty = $('[type=password]').filter(function() { return $(this).val().trim() === ""; }).length > 0 $(':button[type="submit"]').prop('disabled', empty); }).trigger("input")

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div class="form-group row"> <label for="validationpassword" class="col-form-label oldpasswordadduser">Old<br>&#10;Password:</label> <div class="col-6 d-flex"> <input name="validationoldpassword" type="password" class="form-control oldpass" id="oldpasswords" placeholder="Password"> </div> </div> <div class="form-group row"> <label for="validationpassword" class="col-form-label passwordadduser">Password:</label> <div class="col-6 d-flex"> <input name="validationpassword" type="password" class="form-control pass" id="passwords" placeholder="Password" pattern="^(?=.*[az])(?=.*[AZ])(?=.*[0-9])(?=.*[.@#$%^&*_=+-]),{7.}$" title="Password should be like this. eg; A123de:123"> <div class="form-group row"> <label for="validationconfirmpassword" class="col-form-label passwordadduser">Re-enter<br>&#10;Password:</label> <div class="col-6 d-flex"> <input name="validationconfirmpassword" type="password" class="form-control confirmpass" id="confirm_password" placeholder="Confirm Password"> </div> </div> <button id="submitbtn" type="submit" class="btn-primary submitbutton">Done</button> </div>