jquery disabled readonly 하는 방법

요새 웹 개발은 jquery가 일반화 되어 있다. 그래서 jquery를 모르면 개발이 불가능할 정도가 되버렸다..

우선 jquery의 disabled 사용방법

$("#id").attr("disabled",true);

$("#id").attr("disabled",false);

그러나!

$("#id").attr("readonly",true); 도 있다고 하여 체크박스와 라디오, 셀렉트에 (checkbox , radio , select) 에 먹여볼려고 했는데 도통 먹질 않는것이였다.

알고 봤더니 

readonly와 disabled 차이

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

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

출처: http://asm0628.tistory.com/166

그런데 또 찾아보니 

$("#id").prop("readonly",true); 도 있었다.

그럼또 attr과 prop 차이는 뭘까?

참고 : http://javascriptandjquerydev.blogspot.kr/2012/07/attr-prop.html

 

체크박스 제어할 때 늘 attr, prop 차이가 궁금했는데 위 사이트에서 설명이 잘 되어 있다.

 

//하나더 예를 들어보겠습니다. 체크박스의 checked의 대하여 입니다.
<checkbox id="private" type="checkbox" checked /> 
//체크박스의 checked의 값을 확인합니다.
 
var $checkbox = $('#private'); 
alert($checkbox.attr('checked'));  // checked속성의 값을 표시 → "checked"
alert($checkbox.prop('checked'));  // checked프로파티값을 표시 → true
 
//또 화면의 체크박스를 클릭하여 체크를 해제해보겠습니다.
//•.attr() → "checked"
//•.prop() → false
//.attr()의 경우는 변하지않습니다. 체크가 되어있는지 판단을 할경우 .prop()을 사용할 필요가 있습니다.

 

체크박스를 전체 선택하고 해제하는 스크립트를 쓰려면 .prop()로 true/false 를 제어하자.

출처: http://aramk.tistory.com/25 [깨순이네]