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

자바스크립트/jquery

by somiyuralove 2021. 3. 24. 10:20

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 처리 되어 있는것을 해제하면 된다.

'자바스크립트 > jquery' 카테고리의 다른 글

jquery toggleClass() (0)	2021.04.09
Jquery Form Serialize Disabled 컨트롤 넘기는 방법 (0)	2021.03.24
jQuery.merge(first, second) Returns:Array (0)	2021.02.09
jQuery.map() (0)	2021.02.08
.attr() (0)	2021.02.03