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

});