[JQuery] input 객체 - readonly, disabled 처리

Language/JQuery

[JQuery] input 객체 - readonly, disabled 처리

과일가게 개발자 2016. 7. 6. 10:42

HTML로 이루어진 front-end 개발을 진행하다보면 텍스트박스, 체크박스등과 같은 input 타입의 요소들에
활성화, 비활성화 처리를 해야 할 경우가 있다.

이때 활성화, 비활성화를 위해 많이 사용하는것이 readonly 와 disabled 이다.
readonly의 경우 value 값을 수정할 수 없게끔 만들어 버리고 disabled의 경우 해당 요소들을 완전 비활성화 해버린다.

간단하게 다시 정리하자면 다음과 같다

readonly : input type="text" 에만 가능. 사용자는 value 값을 변경할 수 없음.
disabled : 모든 input 객체에 대하여 비활성화 처리 가능. Form 전송시 해당 객체는 전송이 안됨.

disabled 이용시 크게 유의해야 할 점이 있는데, 위에 적었듯이 Form 전송시(Submit)시 해당 객체는 아예 전송이 되지 않는다. 이 부분을 반드시 기억하자.

아래 예제는 간단하게 readonly 와 disabled을 처리하는 스크립트 예제이다.


<script type="text/javascript">

	$(document).ready(function(){

		// 텍스트 박스 readonly 처리
		$("#txtBox").attr("readonly",true); 

		// readonly 삭제
		$("#txtBox").removeAttr("readonly"); 
		


		// disabled 처리
		$("#txtBox").attr("disabled",true); 

		// disabled 삭제
		$("#txtBox").removeAttr("disabled"); 


		// disabled 여부
		if($("#txtBox").is(":disabled")){
			console.log("txtBox는 disabled 처리 되어 있음");
		}

	}
</script>

<body>
	
	<input type="text" name="txtBox" id="txtBox" value="멍멍이">

</body>

만약 front 화면에서 disabled 처리된 항목을 Form 전송시 받고 싶으면 스크립트로 submit을 처리하고 disabled 처리 되어 있는것을 해제하면 된다.

저작자표시