제이쿼리(JQuery)에서 input 객체 readonly로 설정하는 방법

츄르사려고 코딩하는집사입니다.

웹 개발을 하면서, HTML에 체크박스나 어떤 변수가 왔을 때, 변수에 따라 input의 속성을 바꿔야 하는 경우가 많이 있다.

이 글은 변수에 따라 input의 속성을 변경할 때 사용하는 제이쿼리(JQuery)에 대한 글이다. input 객체에서는 readonly와 disabled를 많이 사용한다.

1. readonly

readonly는 input 객체의 value 값을 변경할 수 없다. 또한, input type이 text인 경우에만 사용 가능하다.

<input type="text"/>

2. disabled

disabled는 input 객체의 모든 요소들을 모두 비활성화를 한다. Form 전송을 할 때에도 전송이 되지 않는다.

그래서, 제이쿼리(JQuery)를 통해 readonly와 disabled를 처리하는 스크립트는 아래와 같다.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
    <script type="text/javascript">
    $(document).ready(function(){
			var statmt = A;
      
      if(statmt==A){
	      $("inputbox").attr("readonly", true);
      }
      else {
	      $("inputbox").removeAttr("readonly");
	    }
      
      var statmt = B;

      if(statmt==B){
	      $("inputbox").attr("disabled", true);
      }
      else {
	      $("inputbox").removeAttr("disabled");
	    }
    });
    
    </script>
</head>
<body>
    <input type ="text" id="inputbox"/>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
    <script type="text/javascript">
    $(document).ready(function(){
      var statmt = B;

      if(statmt==B){
	      $("inputbox").attr("disabled", true);
      }
      else {
	      $("inputbox").removeAttr("disabled");
	    }
    });
    
    </script>
</head>
<body>
    <input type ="text" id="inputbox"/>
</body>
</html>

저작자표시

'Language > JavaScript' 카테고리의 다른 글

[자바스크립트/JavaScript] 자바스크립트(JavaScript) 주소창 파라미터 없애는 방법 (0)	2022.04.15
[자바스크립트/JavaScript] 자바스크립트(JavaScript) 이메일 형식 Validation 코드 (0)	2022.04.12
자바스크립트(JavaScript) is not a function 에러 해결 방법 (1)	2022.02.22
네이버 카페 출석수 일정 시간마다 올리는 매크로 프로그램 (21)	2022.02.03
자바스크립트(JavaScript)에서 Int 형변환하기 (0)	2021.11.03
자바스크립트(JavaScript)에서 input 커서 포커스를 벗어날 때 이벤트 적용 방법 (0)	2021.10.29
제이쿼리(JQuery)의 기본 (0)	2021.10.06
[자바스크립트(JavaScript)] HTML 문서에 삽입하는 방법 (0)	2021.09.28