checkbox 클릭시 버튼 활성화하는 법

이 포스팅에서 다룰 것은

 

체크 박스를 클릭 했을 때 버튼 활성화 되는 기능 입니다.

 

체크박스 선택 시 버튼 활성화

 

 

 

---

 

 

<사용하는 대표 기능!>

 

$(체크박스).prop("checked" boolean );

 

$(체크된 체크박스).length;

 

 

---

 

 

 

첫 포스팅인 만큼,

문제를 풀어나간 과정을 게시하고 싶어서

3단계로 나눴습니다.

 

최종 결과물만 보시고 싶다면

가장 하단의 코드만 참고부탁드립니다. :)

 

 

 

 

1. 첫번 째 시도

 

 

 

체크박스를 다중 선택 후 하나라도 체크 해제하면 버튼이 비활성화되는 문제 발견!

하단의 2번으로 해결!

 

 

 

 

2. 두번째 시도

 

 

체크된 checkbox 의 length값을 구하여 1이상이면 버튼 활성화되도록 설정하여 문제해결

이때 var tt =$("[name='order2_chki']").prop("checked").length; 로 하면 기능이 먹지 않고,

 var tt =$("[name='order2_chki']:checked").length; 로 해야 기능이 먹는다.

 

 

 

3. 최종 결과물

 

 

 

1. 체크된 박스와 전체 체크박스의 개수가 일치해야 전체선택이 작동,

2. 체크된 박스와 전체체크박스의 개수가 일치하지 않으면 전체선택 해제!

 

3. 자식체크박스가 모두 선택되면 전체체크박스 체크됨!

 

 

 

 

 

이렇게 해서 체크박스 선택 시, 버튼 활성화 및

그 외 체크박스 기본 기능 구현해봤습니다

 

이상, 봐주셔서 감사합니다 ^^