개발하는 루루언니

javascript & jQurey : input 안에 readonly 값 추가 삭제 본문

컴퓨터 정보/javascript

javascript & jQurey : input 안에 readonly 값 추가 삭제

혜닝혜루 2024. 1. 17. 11:25
728x90
반응형

 

[HTML]

			<label> 아이디</label>
              <input type="text" id="userid" name="userid" class="form-control form-md" value="<?php echo $me['userid']; ?>">
            </div>
            <div class="form-row">
              <label>현재 비밀번호</label>
              <div class="input-group">
                <input type="password" id="passwd0" name="passwd0" class="form-control form-md" value="" >
                <input type="button" id="default_passwd" name="defalte_passwd" value="확인"/>
              </div>
              <div class="clearfix"></div>
            </div>
            <div class="form-row">
              <label>신규 비밀번호</label>
              <div class="input-group">
                <input type="password" id="passwd" name="passwd" class="form-control form-md" value="" readonly>
                <button class="btn btn-form" type="button" id="change-passwd">
                  <span class="material-icons">cached</span>
                </button>
                <div class="form-text info" id="pw-text">영문 소문자,숫자,기호 조합 8자리 이상, 20자까지 </div>
              </div>
              <div class="clearfix"></div>
            </div>
            <div class="form-row">
              <label>신규 비밀번호 재입력</label>
              <input type="password" id="passwd1" name="passwd1" class="form-control form-md" value=""readonly>
              <div class="form-text" id="pw1-text"></div>
              <div class="clearfix"></div>
            </div>

 

[JS]

  $("#default_passwd").click(()=>{
    console.log("실행");
    let userid = document.getElementById("userid").value;
    let passwd = document.getElementById("passwd0").value; //현재 비밀번호
    let data = "mode=check_userid&userid="+userid+"&passwd="+passwd;
    console.log(data);
    $.post("act.php",data , function(r) {
      if(r.result == "OK") {
        $("#passwd").attr('readonly',false);
        $("#passwd1").attr('readonly',false);
        alert(r.msg);
        return false;
      } else {
        alert(r.msg);
        $("#passwd").attr('readonly',true);
        $("#passwd1").attr('readonly',true);
        return false;
      }
    },"JSON") 
  })

 

1. 현재 비밀번호가 맞는지 확인하는 버튼을 눌렀을때 ("#default_passwd"); 맞다면?

2. 새로운 비밀번호 / 새로운 비밀번호 확인 인풋박스를 id 값을 가져와 readonly 값을 제거해준다. false

$(아이디값).attr ('readonly', false) / true 를 하면 readonly 값을 붙혀준다.

728x90