2つ以上のチェックボックスの間にチェックを外していないチェックボックスはありません

Question

クラスルーム用のシートレイアウトを開発中です。私はほとんどそれをやったが、一点で立ち往生した。チェックボックスを使って作成しました。ユーザーが2つ以上のチェックボックスをオンにしてから、順番にチェックする必要があります。ユーザが2つのチェックボックスをチェックしなければならない場合、ユーザはL1とL2ではなくL1とL2をチェックすることができ、チェックボックスの間でチェックを外さずに連続チェックボックスをチェックできることを意味します。

私のチェックボックスは次のように定義されています。

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

});