html : readonly 와 disabled 의 차이

값을 전달하는 fom 안의 input 에는 여러 종류의 타잎 들이 있다.

예를 들면
text

hidden

checkbox

radio

select

 

text 속성의 컴포넌트는 readonly 기능을 제공한다. 이 기능을 쓰면 컴포넌트는 쓰기가 방지 되는 효과를 가질 수 있다.

그러나 checkbox , radio , select 에는 readonly 기능이 없고 쓰기 방지를 위한 disabled 기능만 존재한다.

그렇다면 두 기능의 차이는 무엇일까??

☞?그것은 바로 Controller에서 값을 읽어 들이느냐 못 읽느냐에 있다.

readonly 속성은 쓰기만 방지될 뿐 request.getParameter(“name”)으로 읽을 수 있는 반면

disabled 속성은 아예 DOM 객체에서 사라지기 때문에 request.getParameter(“name”) 으로 값을 읽어 들일 수?없다.

checkbox 나 radio , select 를 쓰기방지는?되지만 컨트롤러가 값을 읽어오게 하기 위해서는 사실 disabled 는 답이 없다.

따라서 우회적인 방법을 쓰곤 한다.

이름이 동일한 히든값을 만들어 두어서?항상 같은 값이 유지되도록 자바스크립트 함수로 만들어 놓고 사용하는 방법이다.

간단한 샘플은 다음과 같다.

<input name=”test” type=”checkbox” disabled=”disabled” value=”1″/>
<input name=”test” type=”hidden”? value=”1″/>

표현만 하고 다음번에 다시 읽어와야 하는 경우라면?(신청서를 수정할 때,수정 불가능한 항목을 만들고 싶은 경우?)
아래 표현처럼 쓰면 되겠다.

<input name=”test” type=”checkbox” disabled=”disabled” value=”${val}”/>
<input name=”test” type=”hidden”? value=”${val}”/>

출처 😕http://jhoonslife.tistory.com/tag/disabled

================================================================텍스트 필드, Textarea, Radiobutton, Checkbox등을 사용못하게 할때?disabled?옵션을 사용하면 됩니다.

	<input type=text size=20 value=”지워보세요.”>
	<input type=text size=20 value=”지울수 없음.”?disabled>
	<textarea wrap=”VIRTUAL” cols=”20″ >Textarea</textarea>
	<textarea wrap=”VIRTUAL” cols=”20″?disabled>Textarea</textarea>
??	<input type=”checkbox” name=”checkbox” value=”checkbox”> <input type=”radio” name=”radiobutton” value=”radiobutton”>
???(적용시)	<input type=”checkbox” name=”checkbox” value=”checkbox”?disabled> <input type=”radio” name=”radiobutton” value=”radiobutton”?disabledchecked>
○ 참고로 disabled와 readonly는 둘다 값을 수정할 수 없도록 하는 속성입니다. ○ 다만 readonly는 그 값을 폼을 통해 전송하지만 disabled 는 값을 아예 전송하지 않는 차이가 있습니다. ○ 그러므로 사용하실 때는 두 속성을 구분하셔서 사용하세요.