两个或多个选中的复选框之间没有未选中的复选框

Question

我正在为 class 房间设计座位布局。我几乎完成了，但卡在了一点。我已经通过复选框完成了，现在我想要实现的是，当用户选中两个或两个以上的复选框时，它应该是有序的。意味着如果用户必须选中两个复选框，那么用户可以选中 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();
        }
    });

});

两个或多个选中的复选框之间没有未选中的复选框

No unchecked check box between two or more checked check boxes

javascript

jquery

unchecked

checked