No unchecked check box between two or more checked check boxes

Question

I am in a process of developing a seat lay out for a class room. I have almost done it but stuck at one point. I have made it through check boxes now what i want to achieve is when user checked two or more than two check boxes then it should be in order. Means if user has to checked two check boxes then user can checked L1 and L2 and not L1 and L3, means he can checked consecutive check boxes without leaving any box unchecked between check boxes.

My check boxes are defined as below.

<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>

Similarly user can not checked check box K1 and L2 because all are in different rows.

Answer 1

Try the following. However you can optimize it, I just wrote logic for you:

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

});