[jQuery] radio / checkbox 제어하기(ft. 활성화/비활성화)

input 태그의 text의 경우 readonly라는 속성을 가지고있어 쉽게 활성화/비활성화를 시킬수 있지만

radio/checkbox 같은 녀석들은 readonly 속성을 사용할 수 없다.

그래서 radio/checkbox의 활성화/비활성화 제어 방법에 대해 기록해 두고자 한다.

 

사실 찾아보면 다양한 방법들이 나올텐데

여기서는 readonly 대신 사용할 수 있는 disabled 라는 속성을 활용할 것이다.

 

코드를 통해 가볍게 접근해보자.

---

▷ 예제1) radio/checkbox 제어

$("input:checkbox[name=mineCheck]").attr("disabled", true); //비활성화
$("input:checkbox[name=mineCheck]").attr("disabled", false); //활성화

$("input:radio[name=mineRadio]").attr("disabled", true); //비활성화
$("input:radio[name=mineRadio]").attr("disabled", false); //활성화

 

예제는 간단하다 'mineRadio'라는 이름을 가진 checkbox와 input을 활성화 비활성화 시키는것이다.

허나 단점 역시 존재하는데

만약 form 방식으로 개발을 진행한다면 disabled로 인해 값을 넘길수 없다고 한다.

그래서 input hidden으로 처리한다는 말도 있고, onclick event return false로 막는 경우도 있고 몇가지가 있는거같은데 상황에따라 찾아서 잘 사용해주자.

---

기타 제어 방법은 하단 게시글을 참고하자.

 

참고: https://mine-it-record.tistory.com/296

[JavaScript] jQeury - radio / checkbox script로 제어하기 (feat. prop, is, checked)