개발/Script

[jQuery] attr() , prop() 사용방법과 라디오 버튼 비활성화

jooon 2022. 7. 28. 14:29

일단 attr() 과 prop()의 차이를 설명하자면 jQuery 1.6버전 부터 두개의 함수가 서로 분리 되었는데
attr() : HTML 입장에서 나타내는 속성(Attribute)
prop() : JavaScript 입장에서 나타내는 프로퍼티(property)

두 함수의 차이 ex)
html 문
<input type=“checkbox” id=“test” name=“test” checked />

checkbox id가 test로 예를 들자면

js 문
$(“#test”).attr(“checked”)
-> 반환값 : checked

$(“#test”).prop(“checked”)
-> 반환값 : true

* 위 특성을 이용하여 사용방법을 알아보자

1. attr()

ex)
HTML 속성을 이용하여 이미지 태그에 src속성 값을 변경하여 이미지를 동적으로 변경하는 용도로 사용하려고 한다.

html 문
<img id=“test_img” src=“” >

img tag id가 test_img인 것에 attr 함수를 이용하여 변경하려고 한다.

js 문
$(“#test_img”).attr(“src”, 이미지 경로);

이런식으로 바꿔주면 이미지가 바뀐다 이미지 경로는 로컬이나 db에 저장된 file 정보를 가져와서 넣어주면 된다.

2. prop()

ex) prop 함수를 이용하여 라디오 버튼을 비활성화 하려고 한다.

html 문
<input type=“radio” name=“test_radio” />

radio name이 test_radio인 것에 prop 함수를 이용하여 비활성화 시키려고 한다.

js 문
$(“input:radio[name=‘test_radio’]”).prop(“disabled”,true);

이런식으로 사용하면 라디오 버튼이 비활성화 되어 클릭을 하여도 클릭이 되지 않는다 반대로 활성화 시키려면 false를 하면 다시 활성화 된다

반응형