I have customised checkbox elements arranged inline on the website.
<div id="hours" class="checkbox_radio_container">
<label><input type="checkbox" name="hours[]" value="10" required="" onchange="function()"><span>10<sup><u>00</u></sup>-11<sup><u>00</u></sup></span></label>
<label><input type="checkbox" name="hours[]" value="11" required="" onchange="function()"><span>11<sup><u>00</u></sup>-12<sup><u>00</u></sup></span></label>
<label><input type="checkbox" name="hours[]" value="12" required="" onchange="function()"><span>12<sup><u>00</u></sup>-13<sup><u>00</u></sup></span></label>
<label><input type="checkbox" name="hours[]" value="13" required="" onchange="function()"><span>13<sup><u>00</u></sup>-14<sup><u>00</u></sup></span></label>
<label><input type="checkbox" name="hours[]" value="14" required="" onchange="function()"><span>14<sup><u>00</u></sup>-15<sup><u>00</u></sup></span></label>
<label><input type="checkbox" name="hours[]" value="15" required="" onchange="function()"><span>15<sup><u>00</u></sup>-16<sup><u>00</u></sup></span></label>
<label><input type="checkbox" name="hours[]" value="16" required="" onchange="function()"><span>16<sup><u>00</u></sup>-17<sup><u>00</u></sup></span></label>
<label><input type="checkbox" name="hours[]" value="19" required="" onchange="function()"><span>19<sup><u>00</u></sup>-20<sup><u>00</u></sup></span></label>
</div>
How to prevent checking a checkbox that is not adjacent to a previously checked one without using jQuery. The pictures below will help you understand what I mean.
Allowed possibilities:
Not allowed possibilities:
I haven’t written any JavaScript code yet because I have absolutely no idea how to start.