두 개 이상의 확인란을 선택하지 않은 상태에서 확인란을 선택하지 마십시오.

Question

수업 룸을위한 좌석 배치 과정을 개발 중입니다. 나는 거의 끝내었지만 한 지점에 머물렀다. 나는 그것을 달성하기 위해 지금 체크 박스를 통해 만들었습니다. 사용자가 두 개 이상의 체크 박스를 체크 한 다음 순서대로 정렬해야합니다. 사용자가 두 개의 확인란을 선택해야한다면 L1과 L2를 확인하고 L1과 L3은 확인할 수 없으므로 확인란 사이에 아무 것도 선택하지 않고 연속 된 확인란을 선택할 수 있음을 의미합니다.

내 확인란의 정의는 다음과 같습니다.

<input class="single-checkbox" type='checkbox' name='seatdata[]' value='10|15' id="L14" /><label for="L14">L14</label> 
<input class="single-checkbox" type='checkbox' name='seatdata[]' value='10|14' id="L13" /><label for="L13">L13</label> 
<input class='single-checkbox' type='checkbox' name='seatdata[]' value='10|13' id="L12" /><label for="L12">L12</label> 
<input class='single-checkbox' type='checkbox' name='seatdata[]' value='10|12' id="L11" /><label for="L11">L11</label> 
<input class='single-checkbox' type='checkbox' name='seatdata[]' value='10|11' id="L10" /><label for="L10">L10</label> 
<input class='single-checkbox' type='checkbox' name='seatdata[]' value='10|10' id="L9" /><label for="L9">L9</label> 
<input class='single-checkbox' type='checkbox' name='seatdata[]' value='10|9' id="L8" /><label for="L8">L8</label> 


<input class='single-checkbox' type='checkbox' name='seatdata[]' value='9|15' id="K14" /><label for="K14">K14</label> 
<input class='single-checkbox' type='checkbox' name='seatdata[]' value='9|14' id="K13" /><label for="K13">K13</label> 
<input class='single-checkbox' type='checkbox' name='seatdata[]' value='9|13' id="K12" /><label for="K12">K12</label> 
<input class='single-checkbox' type='checkbox' name='seatdata[]' value='9|12' id="K11" /><label for="K11">K11</label> 
<input class='single-checkbox' type='checkbox' name='seatdata[]' value='9|11' id="K10" /><label for="K10">K10</label> 
<input class='single-checkbox' type='checkbox' name='seatdata[]' value='9|10' id="K9" /><label for="K9">K9</label> 
<input class='single-checkbox' type='checkbox' name='seatdata[]' value='9|9' id="K8" /><label for="K8">K8</label> 

마찬가지로 모든 사용자가 다른 행에 있으므로 K1과 L2 확인란을 선택할 수 없습니다.

Answer 1

다음을 시도하십시오.

$(function() { 

    $("input.single-checkbox").click(function (e) { 

     var id = $(this).attr("id"); 
     var char = id.charAt(0); 
     var num = Number(id.substr(1)); 

     var prevElementId = "#" + char + (num - 1); 
     var nextElementId = "#" + char + (num + 1); 

     var selectedItems = $("input.single-checkbox:checked").length; 

     if (selectedItems === 0 || selectedItems === 1 || ($(prevElementId).length > 0 && $(prevElementId).is(":checked")) || ($(nextElementId).length > 0 && $(nextElementId).is(":checked"))) { 

      // do nothing 

     } else { 
      e.preventDefault(); 
     } 
    }); 

});