체크박스 선택갯수 제한하는 방법
본문
#1단계
체크박스는 중복선택이 가능한데요. 최대 선택갯수를 제한하는 방법이 있는지요?
#2단계
위의 질문에 좀 더 나아가서, 예를들어 여분필드 wr_1 에서 신청강좌수를 선택하고
wr_2 에서는 체크박스로 수강과정을 여러개 선택할 수 있는데, wr_1 에서 선택한 숫자만큼
체크박스를 선택하게 하는 방법도 있을까요?
#3단계
위의 2단계에서 하나 더 나아간다면 wr_1에서 선택한 숫자와 wr_2에서 선택한 갯수가 다르면
alert 를 출력하는 것 까지 된다면 가장 좋을 것 같습니다.
작성하다보니 질문이 좀 거창해졌는데요.
위의 내용 관련하여 도움 부탁 드립니다.
감사합니다.
답변 6
$(function() {
$('input[name^="wr_2"]').on('change', function() {
var limit = parseInt($('input[name="wr_1"]').val());
var cnt = $('input[name^="wr_2"]:checked').length;
if (cnt > limit) {
alert('강좌수만큼 신청이 가능합니다.');
$(this).prop('checked', false);
}
});
});
이게 맞는건지 모르겠는데
깔금하게 코딩 우째 할가요...
내가 만들고도 지저분하네 ㅡㅡ;
wr_1
<input type="checkbox" name="" class="wr_1" value="" >
<input type="checkbox" name="" class="wr_1" value="">
<input type="checkbox" name="" class="wr_1" value="" >
<input type="checkbox" name="" class="wr_1" value="">
wr_2
<input type="checkbox" name="" class="wr_2" value="" >
<input type="checkbox" name="" class="wr_2" value="">
<input type="checkbox" name="" class="wr_2" value="" >
<input type="checkbox" name="" class="wr_2" value="">
<script>
$(document).on("click", ".wr_1", function(){
const max_chk = 3;
let wr1_len = $("input.wr_1:checked").length;
if(wr1_len > max_chk){
alert(`최대개수 ${max_chk} 개 초과!`);
return false;
}
});
$(document).on("click", ".wr_2", function(){
const max_wr_1_cnt = $("input.wr_1:checked").length;
let wr2_len = $("input.wr_2:checked").length;
if(wr2_len > max_wr_1_cnt){
alert(` wr_1 최대개수 ${max_wr_1_cnt} 개 초과!`);
$("input.wr_2:checked").prop("checked", false);
return false;
}
});
</script>
답변주신 모든 분들께 감사 드립니다.
그런데 제가 잘 못하는 것인지 위의 소스를 적용해도 갯수 관계없이 그대로 패스가 되네요.
신청폼 영역의 소스는 아래와 같습니다.
########write.php 파일###################
........
<tr>
<td width="15%" bgcolor="#fef6ea"><span class="caption">수강갯수</span></td>
<td width="85%" bgcolor="#fafafa">
<select name="wr_5" id="wr_5" required>
<option value="">선택하세요.</option>
<option value="1"<?php echo ($write['wr_5'] == "1") ? " selected" : "";?>>1강좌</option>
<option value="2"<?php echo ($write['wr_5'] == "2") ? " selected" : "";?>>2강좌</option>
<option value="3"<?php echo ($write['wr_5'] == "3") ? " selected" : "";?>>3강좌</option>
<option value="3"<?php echo ($write['wr_5'] == "4") ? " selected" : "";?>>4강좌</option>
</select>
</td>
</tr>
<tr>
<td width="15%" bgcolor="#fef6ea"><span class="caption">신청시간</span></td>
<td width="85%" bgcolor="#fafafa">
<input type="checkbox" name="check1[]" value="문법"<?php echo in_array("문법", $check1) ? ' checked="checked"' : '' ?>> 문법
<input type="checkbox" name="check1[]" value="리딩"<?php echo in_array("리딩", $check1) ? ' checked="checked"' : '' ?>> 리딩
<input type="checkbox" name="check1[]" value="토익"<?php echo in_array("토익", $check1) ? ' checked="checked"' : '' ?>> 토익
<input type="checkbox" name="check1[]" value="회화"<?php echo in_array("회화", $check1) ? ' checked="checked"' : '' ?>> 회화
<input type="checkbox" name="check1[]" value="영작"<?php echo in_array("영작", $check1) ? ' checked="checked"' : '' ?>> 영작
</td>
</tr>
................
######write_update.head.skin.php 파일################
<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
$wr_6 = implode(',', $_POST['check1']);
?>
이렇게 된 상태에서 알려주신 소스에 wr_1 과 wr_2 대신에 wr_5 와 wr_6 으로 해서 적용해 보았는데,
적용이 되지 않네요. 혹시 추가로 알아야 할 사항이 있을까요?
답변 주신분들이 전부 input 기준으로 답변들을 드려서 안되지 않을가 싶어요~
wr_5 이게 select 자나요
$("#wr_5 option:selected").val() 로 수정하셔서 응용 해보세요~
update 페이지 넘기기전에 스크립트 에러 체크 해보시고요~
답변주신 모든 분들 감사드려요. 주신 내용이랑 더 찾아보고, 시행착오끝에 어찌어찌 해결은 했습니다.
채택이 한분 뿐이라서 가장먼저 답글 남겨주신 분께 드렸네요. 항상 감사합니다.
