[script] checkbox 전체 선택 및 Next 버튼 비활성화

 

개발을 하다보면 회원가입 약관동의 페이지 작업을 할 때 체크박스 관련 이벤트를 주는 경우가 있다.

그 때마다 이런 저런 스크립트를 찾아 조합해서 사용하고는 했는데
이번에 작업한 내용을 블로그에 작성해본다.

다음과 같이 name="checkTmp"를 가진 3개의 체크박스가 있고,
전체선택을 위한 id="checkAll" 값을 가진 전체선택 체크박스가 있다고 하자.
최하단 버튼은 페이지 호출 시 비활성화 상태, 모두 동의한 이후에 활성화하여 다음화면으로 진행할 수 있도록 한다.

<input type="checkbox" name="checkTmp" id="checkbox1" value="Y" /> checkbox1
<input type="checkbox" name="checkTmp" id="checkbox2" value="Y" /> checkbox2
<input type="checkbox" name="checkTmp" id="checkbox3" value="Y" /> checkbox3 
        
<input type="checkbox" id="checkAll"> 전체 선택
        
<div>
	<button type="button"id="next" disabled onclick="fnSubmit();">Next</button>
</div>

 

#checkAll 체크박스가 변경되는 경우, checkAll의 체크여부를 확인하여
name=checkTmp를 가진 체크박스를 동일한 상태로 변경처리 해준다.

// 전체 선택에 따른 하위 체크박스(checkTmp)의 활성/비활성화 여부 
$('#checkAll').change(function () {
	var checked = $(this).prop('checked');
	$('input[name="checkTmp"]').prop('checked', checked);
});

 

name="checkTmp"를 가진 3개의 체크박스 중 하나가 변경되는 경우에는 반대로 변경처리가 필요하다.
checkTmp의 갯수와 선택된 checkTmp의 갯수가 같은지 비교하여
같으면 true, 다르면 false 이므로 해당 값을 기준으로 #checkAll 체크박스의 상태를 변경해준다.
$('#checkAll').prop('checked', selectAll); 구문을 처리!
#checkAll 체크박스가 동의처리된 경우에만 #next 버튼이 활성화되도록 해준다.

$('input[name="checkTmp"]').change(function () {
	var tmpLength = $('input[name="checkTmp"]').length;
	var checkedLength = $('input[name="checkTmp"]:checked').length;
	var selectAll = (tmpLength == checkedLength);
	$('#checkAll').prop('checked', selectAll);
	selectAll ? $('#next').removeAttr('disabled'):$('#next').attr('disabled','disabled');
});

 

#checkAll 체크박스가 변경되는 경우, checkAll의 체크여부를 확인하여
#checkAll 체크박스가 동의처리된 경우에만 #next 버튼이 활성화되도록 해준다.

// 전체선택 checkbox의 상태에 따라 id = next 값을 가진 버튼의 비활성화를 적용/해제
$('#checkAll').change(function () {
	// #checkAll 의 값이 true 인 경우 $('#next').removeAttr('disabled')
	// #checkAll 의 값이 false 인 경우 $('#next').attr('disabled','disabled'); 이 적용됨.
	$(this).prop('checked') ? $('#next').removeAttr('disabled'):$('#next').attr('disabled','disabled');
});