При клике на кнопку изменить ее имя и сделать ее неактивной пока не заполнены два input'а

Question

Есть в форме два неактивных input'а (readonly). Есть также кнопка "изменить", при нажатии на которую input'ы становятся активными (снимается параметр readonly). Эта кнопка меняет свое название (на "сохранить"). Необходимо, чтобы эта кнопка оставалась неактивной, пока не заполнены оба input'а. Как только input'ы заполнены - делать ее активной. Код пока вот такой.

<label id="pwmsg" for="password">Пароль</label>
<button type="button" id="edit" class="btn btn-info">Изменить</button>
<script type="text/javascript">
$(function() {
  $("#edit").on("click",function() {
    var name = $("[id=password]")
    name.val("");
    name.focus();
    if (this.innerText=="Изменить") {
        this.innerText="Сохранить";
        $("[id=password]").removeAttr("readonly");
        $("[id=password]").attr("placeholder", "");
        $("[id=password2]").removeAttr("readonly");
        $("[id=password2]").attr("placeholder", "");
    }
    else {
      this.innerText="Изменить";
      $("[id=password]").attr("readonly","readonly");
      $("[id=password]").attr("placeholder", "Пароль изменен");
      $("[id=password2]").attr("readonly","readonly");
      $("[id=password2]").attr("placeholder", "Пароль изменен");
    }
  });
});
</script>
<input type="password" id="password" readonly placeholder="Скрыт в целях безопасности" value="" aria-required="true" class="error" aria-invalid="true" />
<label id="pw2msg" for="password2">Повторите пароль</label>
<input type="password" id="password2" readonly placeholder="Скрыт в целях безопасности" value="" aria-required="true" class="error" aria-invalid="true" />

Answer 1

Как-то так.

Добавил условие чтоб пароли были равны

let password = $("#password");
let password2 = $("#password2");

$(function() {
  $("#edit").on("click",function() {
    if (this.innerText=="Изменить") {
        this.innerText="Сохранить";
        password.removeAttr("readonly");
        password.attr("placeholder", "");
        password.val("");
        password.focus();
        
        password2.removeAttr("readonly");
        password2.attr("placeholder", "");
    }
    else {
      this.innerText="Изменить";
      password.val("");
      password.attr("placeholder", "Пароль изменен");
      password.attr("readonly","readonly");      
      password2.val("");
      password2.attr("placeholder", "Пароль изменен");
      password2.attr("readonly","readonly");
      
    }
  });
  
  password.keyup(checkPasswords);
  password2.keyup(checkPasswords);
  
  
  function checkPasswords(){
    if (password.attr("readonly") !== "readonly") {
      if (password.val().length > 0 && password2.val().length > 0
          && password.val() === password2.val()) {
            $("#edit").attr('disabled', false)
          } else {
            $("#edit").attr('disabled', true);
          }
      }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label id="pwmsg" for="password">Пароль</label>
<button type="button" id="edit" class="btn btn-info">Изменить</button>

<input type="password" id="password" readonly placeholder="Скрыт в целях безопасности" value="" aria-required="true" class="error" aria-invalid="true" />

<label id="pw2msg" for="password2">Повторите пароль</label>
<input type="password" id="password2" readonly placeholder="Скрыт в целях безопасности" value="" aria-required="true" class="error" aria-invalid="true" />

БЛОГ НА HUSL

При клике на кнопку изменить ее имя и сделать ее неактивной пока не заполнены два input'а

Ответы (1 шт):