반응형
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 처리 되어 있는것을 해제하면 된다.
'Language > JQuery' 카테고리의 다른 글
| [Javascript] DOM 객체 ID 존재여부 확인하기 (1) | 2016.12.06 |
|---|---|
| [jQuery] IE Ajax cache 관련 오류. (1) | 2016.10.13 |
| [JQuery] input 배열 값 가져오기 (3) | 2016.05.11 |
| [Javascript] 문자열을 SHA256으로 인코딩하기 (3) | 2016.03.14 |
| [Javascript] JSON 형태의 데이터 생성하기 (3) | 2016.03.09 |