Me gustaría habilitar el envío debido a la condición, mientras que también cuando el usuario ingresa en el campo de contraseña anterior, el botón se desactiva hasta que el usuario ingresa la contraseña de confirmación, el botón se vuelve a habilitar
Aquí está mi intento
$('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> 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> 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>
Tienes que delegar
$('#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> 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> 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>