jQuery에서 엘리먼트의 속성을 동적으로 변경시키기 위해 .attr 메서드를 흔히 사용합니다.

폼 요소에서도 checkbox나 radio에 체크값에 변경을 주기 위해 .attr 메서드에 checked 값을 넣었지만 동작하지 않았습니다.

jQuery 1.6 버전부터 .attr 메서드의 기존 역할은 .attr과 .prop로 나뉘어지게 되었다는걸 알았습니다.

.attr과 .prop 메서드의 차이는 간단합니다. html 어트리뷰트와 javascript의 속성을 컨트롤하는 차이입니다. 체크박스나 라디오버튼은 html 어트리뷰트를 변경해도 변화가 없음을 확인 할 수 있습니다.

.attr로 체크값을 변경해도 화면에서는 변동이 없고 코드상에서만 변동이 있었습니다. 이런 증상이 있다면 .attr 메소드를 .prop 메소드로 변경해야 될겁니다.

// 변경 전

$(".checkbox").attr("checked", true);

 

// 변경 후