input 속성 readonly, disabled 차이점

게시판을 만들면서 입력창 그대로의 느낌을 가져와서 상세페이지를 만들어 볼 생각에 "disabled" 속성을 사용 한 적이 있었다. disabled를 사용하게되면 input의 배경색이 회색으로 채워지는 모습을 볼 수 있었고
회색을 제거하는 해결방법을 찾아보면서 "readonly" 속성을 알게 되었다. 
이 과정에서 두 속성의 차이를 알게 되면서 정리해 보려고 하는데...생각보다...글이..

짧다.

 

반응형

readonly와 disabled

readonly와 disabled은 공통적으로 input 태그를 사용자가 입력 및 수정을 못하게 비활성화하는 방법으로 사용된다.
같은 목적으로 사용되지만 분명한 차이점이 있습니다.

 

readonly

· form submit 가능
· input과 textarea에서 사용가능

 

disabled

<input type="text" value="disabled" disabled>

· form submit 불가능
· button, optgroup, option, select, input, textarea에서 사용가능

 

자바스크립트, 제이쿼리로 readonly, disabled 적용하기

· javascript로 readonly, disabled 적용하기

<script>
    document.getElementById('ID')disabled = true;
    document.getElementById('ID').disabled = false;

    document.getElementById('ID').readOnly = true; 
    document.getElementById('ID').readOnly = false;
</script>

· jQuery로 readonly, disabled 적용하기

<script>
    $('#ID').attr("readonly" true);
    $('#ID').attr("readonly" false);

    $('#ID').attr("disabled" true);
    $('#ID').attr("disabled" false);
</scirpt>

 

readonly와 disabled 사용하기

<input type="text" value="readonly" readonly>
<input type="text" value="disabled" disabled>

readonly 와 disabled의 차이는

시각적인 차이도 있지만, form submit으로 값을 보낼때 disabled의 값은 전송되지 않는 점 인것같다.
어찌보면 단순한 차이지만...몰라서 한참을 고생했다..

만약 disabled의 값을 submit 시켜야한다면 hidden 속성을 가진 input을 만들어서 넘기는 방법을 사용해야 하는것 같다.