요소의 비활성 readonly, disabled 차이와 사용법

 

요소의 비활성 readonly, disabled 차이와 사용법

 

보통 웹 페이지에서 어느 특정 요소를 비활성화 처리할 때 사용하는 것이 reaonly 와 disabled 이다.

(readonly는 text요소, 나머지 요소는 disabled 사용)

 

하지만 이 둘은 차이점이 있다.

가장 큰 차이점은 DOM 객체에서 읽을 수 있느냐 없느냐 이다.

 

쉽게 말하면 readonly의 경우 객체의 쓰기를 비활성화 한다. (객체는 읽음)

하지만 disabled 된 요소는 DOM 객체를 아예 읽지 않는다.

 

그리하여 <form> 태그로 해당 값을 서블릿으로 넘길 때

readonly된 값은 읽어가지만 disabled된 값은 읽지 않는다. 그래서 disabled된 데이터가 넘어가지 않는 것이다.

 

(폼을 submit하든 폼의 데이터를 serialize() 해서 넘기든 disabled된 값은 넘거가지 않는다.)

 

 

그럼 disabled 된 요소의 값을 서블릿으로 전달하는 방법은 무엇일까?

간단히 2가지 방법이 있다.

 

첫번째는 hidden 으로 해당 값을 전달하는 방법.

disabled된 요소의 값을 hidden된 input요소의 value 에 넣어 전달.

 

두번째는 submit이나 serialize 하기 전에 해당 요소의 disabled 속성을 제거했다가 전송 후 다시 disabled 하는 방법이 있다.

 

ex)

  $("#id").attr("disabled", false);  //해당 요소의 disabled 속성 변경(false)
  var dataParam = $("#searchForm").serialize();  //데이터 serialize
  $("#id").attr("disabled", true);  //해당 요소의 disabled 속성 변경(true)

 

이렇게 하면 disabled 된 요소가 서블릿으로 전달 된다.