메뉴 건너뛰기

프로그램언어

조회 수 93 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

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을 만들어서 넘기는 방법을 사용해야 하는것 같다.

 


  1. HTML 특수문자 / 띄어쓰기,공백, 따옴표

    Date2023.01.27 Views2199
    Read More
  2. input 속성 readonly, disabled 차이점

    Date2023.01.27 Views93
    Read More
  3. Input 태그 한글, 영문모드 전환

    Date2023.01.12 Views248
    Read More
  4. MSword : 인쇄 미리보기-한페이지씩 보이기

    Date2021.03.26 Views301
    Read More
  5. map태그에서 window.open() 쓰기

    Date2021.03.26 Views201
    Read More
  6. input태그 tab 순서 설정 : tabindex

    Date2021.03.26 Views357
    Read More
  7. 인라인 자동완성 기능 막기

    Date2021.03.25 Views130
    Read More
  8. javascript로 alt 또는 title 달때 내용에 포함된 따옴표 치환하기

    Date2021.03.25 Views166
    Read More
  9. HTML - Form 태그, Input 태그 자동완성 해제하기

    Date2021.03.09 Views152
    Read More
  10. CSS - p태그 등 너무 긴 문자열이 존재할 때, 넓이에 따른 자동 줄바꿈

    Date2021.03.09 Views590
    Read More
  11. HTML - Table td안에 특수문자(")가 존재할 경우 넓이 초과 현상

    Date2021.03.09 Views247
    Read More
  12. HTML, CSS - 헤더컬럼 고정형 table 구성하기

    Date2021.03.09 Views737
    Read More
  13. 크롬 알림처럼 띄워보기

    Date2019.04.29 Views845
    Read More
  14. 네이버 웹마스터도구 메타태그

    Date2019.04.29 Views787
    Read More
  15. div iframe 퍼센트 높이조절 문제 해결(div, iframe height 100%)

    Date2019.03.05 Views1003
    Read More
  16. input 자동완성 끄기 HTML

    Date2019.02.19 Views1090
    Read More
  17. 테이블 대신 필드셋(fieldset) 이용

    Date2019.01.16 Views2122
    Read More
  18. FCKeditor 2.6.x 버전 IE9에서의 Dialog 버그 수정

    Date2018.10.27 Views1166
    Read More
  19. form안의 button submit 동작 막기

    Date2018.08.24 Views1723
    Read More
  20. viewport meta 태그를 이용해 모바일 브라우저상에서 레이아웃 조종하는 법

    Date2017.04.14 Views6865
    Read More
Board Pagination Prev 1 2 Next
/ 2

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved