<JSP_jQuery> 체크박스 전체 활성화 및 부분 활성화

1. 체크 박스 전체를 활성화

// 전체 체크박스를 모두 같게 활성화 및 비활성화 한다.
$("#schlEstbDivAll").change(function() {
var checkYN=$(this).prop("checked");
$(".schlEstbDivClass").prop( "checked" ,checkYN);
$(".schlEstbDivClass").prop( "disabled" ,checkYN);
});

// 전체 체크박스를 활성화 하고 나머지 항목을 모두 비활성한다.
$("#numStuAll").change(function() {
var checkYN=$(this).prop("checked");
$(".numStuClass").prop( "checked" ,false);
$(".numStuClass").prop( "disabled" ,checkYN);
});	

2. 부분 체크 박스들의 활성화 및 비활성화

한개를 선택하면 나머지가 비활성화 된다.

$("#numStu1").change(function(){
if($("#numStu1").is(':checked')) {
$("#numStu2").prop( "checked", false);
$("#numStu3").prop( "checked", false);
$("#numStu4").prop( "checked", false);
$("#numStu5").prop( "checked", false);	
} 
});
$("#numStu2").change(function(){
if($("#numStu2").is(':checked')) {
$("#numStu1").prop( "checked", false);
$("#numStu3").prop( "checked", false);
$("#numStu4").prop( "checked", false);
$("#numStu5").prop( "checked", false);	
} 
});
$("#numStu3").change(function(){
if($("#numStu3").is(':checked')) {
$("#numStu1").prop( "checked", false);
$("#numStu2").prop( "checked", false);
$("#numStu4").prop( "checked", false);
$("#numStu5").prop( "checked", false);	
} 
});
$("#numStu4").change(function(){
if($("#numStu4").is(':checked')) {
$("#numStu1").prop( "checked", false);
$("#numStu2").prop( "checked", false);
$("#numStu3").prop( "checked", false);
$("#numStu5").prop( "checked", false);	
} 
});
$("#numStu5").change(function(){
if($("#numStu5").is(':checked')) {
$("#numStu1").prop( "checked", false);
$("#numStu2").prop( "checked", false);
$("#numStu3").prop( "checked", false);
$("#numStu4").prop( "checked", false);	
} 
});
$("#numStu1").change(function(){
if($("#numStu1").is(':checked')) {
$("#numStu2").prop( "checked", false);
$("#numStu3").prop( "checked", false);
$("#numStu4").prop( "checked", false);
$("#numStu5").prop( "checked", false);	
} 
});	
		

 

3. html 소스 

<tr>
<th scope="row"><spring:message code="code.m00215" /></th> <!-- 규모 -->
<td>
<span class="radio-check-wrap">
<input id="numStuAll" type="checkbox">
<label for="numStuAll"><spring:message code="code.m00595" /></label>
</span>
<span class="radio-check-wrap">
<input id="numStu1" name="numStu" type="checkbox" value="1" class="numStuClass" >
<label for="numStu1">0~2,000</label>
</span>
<span class="radio-check-wrap">
<input id="numStu2" name="numStu" type="checkbox" value="2" class="numStuClass" >
<label for="numStu2">2,000~5,000</label>
</span>
<span class="radio-check-wrap">
<input id="numStu3" name="numStu" type="checkbox" value="3" class="numStuClass" >
<label for="numStu3">5,000~10,000</label>
</span>
<span class="radio-check-wrap">
<input id="numStu4" name="numStu" type="checkbox" value="4" class="numStuClass" >
<label for="numStu4">10,000~20,000</label>
</span>
<span class="radio-check-wrap">
<input id="numStu5" name="numStu" type="checkbox" value="5" class="numStuClass" >
<label for="numStu5">20,000이상</label>
</span>
</td>
</tr>