jQuery 로 원하는 갯수만큼 checkbox 선택하기

티켓 예매하는 사이트 같은데서 보면 인원수를 선택하고 그 인원수만큼만 좌석을 선택하는게 있다.

고런걸 한번 jQuery를 이용해서 간략하게나마 맹글어 보겠다.

저쪽 아래의 소스 코드로 맹글어질 것은 아래와 같다. 테스트로 클릭해 보셈~ 

※ 요것은 IE7~9, 크롬에서 정상적으로 테스트 됬다.
인원수 선택 :



소스코드
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"/>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

	<script>
		// html 이 다 로딩된 후 실행
		$(document).ready(function() {
			// 체크박스들이 변경됬을때
			$(":checkbox").change(function() {
				var cnt = $("#person").val();
				
				// 셀렉트박스의 값과 체크박스중 체크된 갯수가 같을때, 다른 체크박스들을 disable 처리
				if( cnt==$(":checkbox:checked").length ) {
					$(":checkbox:not(:checked)").attr("disabled", "disabled");
				}
				// 체크된 갯수가 다르면 활성화 시킴
				else {
					$(":checkbox").removeAttr("disabled");
				}
			});
			
			// 셀렉트박스에서 다른 인원수를 선택하면 초기화 시킴
			$("#person").change(function(){
				$(":checkbox").removeAttr("checked");
				$(":checkbox").removeAttr("disabled");
			});
		});
	</script>
</head>
<body>
	<span>인원수 선택 : </span>
	<select id="person">
		<option value="1">1명</option>
		<option value="2">2명</option>
		<option value="3">3명</option>
		<option value="4">4명</option>
		<option value="5">5명</option>
	</select>

	<table border="1">
		<tr>
			<td><label><input type="checkbox"/>1</label></td>
			<td><label><input type="checkbox"/>2</label></td>
			<td><label><input type="checkbox"/>3</label></td>
			<td><label><input type="checkbox"/>4</label></td>
			<td><label><input type="checkbox"/>5</label></td>
			<td><label><input type="checkbox"/>6</label></td>
		</tr>
		<tr>
			<td><label><input type="checkbox"/>7</label></td>
			<td><label><input type="checkbox"/>8</label></td>
			<td><label><input type="checkbox"/>9</label></td>
			<td><label><input type="checkbox"/>10</label></td>
			<td><label><input type="checkbox"/>11</label></td>
			<td><label><input type="checkbox"/>12</label></td>
		</tr>
	</table>
</body>
</html>

jQuery 를 하면서 매번 느끼는 거지만 jQuery가 없었다면 우쨋을까 하는 생각이 든다. 저런걸 쌩 자바스크립트로 구현할려면..... 암울하기 짝이없다.

나는 jQuery 빠돌히릿~


※ IE9 에서 $(":checked") 를 제대로 못가져오는 버그같은게 있는것 같다. $(":checkbox:checked") 로 하니까 해결이 됬다.