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

});

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

1 个答案: