체크박스 선택갯수 제한하는 방법

체크박스 선택갯수 제한하는 방법

QA

체크박스 선택갯수 제한하는 방법

본문

#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);
      }
  });
});

https://jsfiddle.net/7yvuct34/

이게 맞는건지 모르겠는데

깔금하게 코딩 우째 할가요...

내가 만들고도 지저분하네 ㅡㅡ;

 


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 페이지 넘기기전에 스크립트 에러 체크 해보시고요~

답변주신 모든 분들 감사드려요. 주신 내용이랑 더 찾아보고, 시행착오끝에 어찌어찌 해결은 했습니다.

채택이 한분 뿐이라서 가장먼저 답글 남겨주신 분께 드렸네요. 항상 감사합니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 1

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT