체크박스 선택 범위 지정
html
<body>
<span>인원수</span>
<input type="radio" value="1" name="member"/>1명
<input type="radio" value="2" name="member"/>2명
<input type="radio" value="3" name="member"/>3명
<input type="radio" value="4" name="member"/>4명
<input type="radio" value="5" name="member"/>5명
<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>
script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(":checkbox").change(function() {
var memberCount = $(":radio[name=member]:checked").val(); // 선택 인원 수
var checkedCount = $(":checkbox:checked").length; // 체크된 갯수
if(memberCount == checkedCount) {
$(":checkbox:not(:checked)").attr("disabled", "disabled");
}else{
$(":checkbox").removeAttr("disabled");
}
});
// 인원선택 변경 시
$(":radio[name=member]").change(function(){
$(":checkbox").removeAttr("checked");
$(":checkbox").removeAttr("disabled");
});
});
</script>
'Programming > jQuery' 카테고리의 다른 글
| [jQuery] form 객체를 json 형태로 만들기 (0) | 2015.06.29 |
|---|---|
| [jQuery] jQuery Validate (0) | 2015.06.18 |
| [jQuery] 페이지 이동전 Form 데이터 변경여부 확인하기 (0) | 2015.05.08 |
| [jQuery] form의 모든 input text null check (0) | 2015.04.22 |
| [jQuery] jQuery 초기화 (0) | 2015.03.12 |