-1

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.

F Q
  • 97
  • 6

1 Answers1

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

});
Ankush Jain
  • 5,654
  • 4
  • 32
  • 57
  • thanks and how I can include code for not allowing gap also between checked and disable check box – F Q Dec 06 '16 at 07:39
  • how I can do this on button click. if there is a gap form should not post. – F Q Dec 06 '16 at 09:51
  • what do you mean by gap form – Ankush Jain Dec 06 '16 at 09:53
  • I mean same scenario i want to stop form posting and on submitting form it gives error like not consecutive check box checked. – F Q Dec 06 '16 at 10:22
  • You mean you want to put one more extra validation to prevent user to submit wrong selection? – Ankush Jain Dec 06 '16 at 10:27
  • and want to validate it on button click? – Ankush Jain Dec 06 '16 at 10:27
  • yes you are write there are some disable check boxes as well and I want to disallow user to select check boxes with a gap of one between disable and checked check boxes. – F Q Dec 06 '16 at 11:00
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/129895/discussion-between-f-q-and-ankush-jain). – F Q Dec 06 '16 at 11:00