Need to restrict a user to check consecutive checkboxes inside each Inner Table

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Need to restrict a user to check consecutive checkboxes inside each Inner Table

I have a table (id=’MainTable’) where I am displaying availability records and inside the Main Table I have a table with checkboxes for the available time. The checkboxes in the Inner Table will be different in number and there will 1 or more than 1 checkboxes for each record in a table. e.g the Inner Table of first line can have 5 checkboxes and can have 3 checkboxes for the second line and so on.

A user can check 1 or more than 1 checkboxes of a specific line of Inner Table but in a sequence/consecutive to book an assessor for more than 1 hour.

E.g In the first line a user can select either a checkbox with “08:00 AM - 09:00 AM” and “09:00 AM - 10:00 AM” to make 2 hours but can’t select “08:00 AM - 09:00 AM” and “12:00 PM - 01:00 PM” to make 2 hours because they are not consecutive checkboxes.

E.g In the second line a user can select either a checkbox with “09:30 AM - 10:30 AM” and “10:30 AM - 11:30 AM” to make 2 hours but can’t select “09:30 AM - 10:30 AM” and “05:00 PM - 06:00 PM” to make 2 hours because they are not consecutive checkboxes.

Without thinking about whether there is a simpler way to do it, this seems to work fine (but uses jQuery – you did not say anything about if or what frameworks you use; feel free to convert it to vanilla-js if you want to):

Note that this evaluates by consecutive checkboxes(!), it does not check whether consecutive checkboxes are consecutive times or if there is a gap in between. Also keep in mind that Javascript can be disabled and manipulated, so if this information is crucial, don't miss out on server-side verification.

Tcobb's script differs in behavior (select all checkboxes and deselect the second one to see a difference). The OP should clarify what behavior he intends in such cases. Another case would be if the first checkbox were selected and the user tries to select the third one – instead of disallowing it, one could also automatically select the second checkbox together with the third one (in other words: select all checkboxes in between if necessary).

Without thinking about whether there is a simpler way to do it, this seems to work fine (but uses jQuery – you did not say anything about if or what frameworks you use; feel free to convert it to vanilla-js if you want to):

Note that this evaluates by consecutive checkboxes(!), it does not check whether consecutive checkboxes are consecutive times or if there is a gap in between. Also keep in mind that Javascript can be disabled and manipulated, so if this information is crucial, don't miss out on server-side verification.

Sorry for not being very clear. By consecutive checkboxes I mean consecutive times and no gap in between.

Then try this: http://jsfiddle.net/Q6ExD/2/
This assumes a proper (i.e. consistent!) pattern in the value of the checkbox. If you cannot guarantee that the value pattern will exactly look the same (whitespaces, upper-/lowercase), you need to adjust the getTimeInterval function (e.g. each checkbox could get a data-startTime and data-endTime attribute that you can use, …); if not, this should suffice.

I stick with jQuery especially after you mentioned in another forum that you're already using jQuery anyway.

Then try this: http://jsfiddle.net/Q6ExD/2/
This assumes a proper (i.e. consistent!) pattern in the value of the checkbox. If you cannot guarantee that the value pattern will exactly look the same (whitespaces, upper-/lowercase), you need to adjust the getTimeInterval function (e.g. each checkbox could get a data-startTime and data-endTime attribute that you can use, …); if not, this should suffice.

I stick with jQuery especially after you mentioned in another forum that you're already using jQuery anyway.

Thank you very your solution but when I run it i get "TypeError: $(…).on is not a function"

asifakhtar, did you try the code i offered? it filters checkboxes depending on their value from the very beginning and if there is no ' - ' substring (which goes between the two time points) the checkbox is not involved in the process. such filtering can be easily used with jQuery also. you can use 'M - ' instead of just ' - ' to make filtering be much precise

xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"yyy: facepalm

asifakhtar, did you try the code i offered? it filters checkboxes depending on their value from the very beginning and if there is no ' - ' substring (which goes between the two time points) the checkbox is not involved in the process. such filtering can be easily used with jQuery also. you can use 'M - ' instead of just ' - ' to make filtering be much precise

my english is not good that's why i didn't understand the goal. i thought that you wanted the user could check only two nearest checkboxes... it was just interesting for me to make a non-jQ solution, though i like jQ very much

As for my solution and the checkbox that needs to be excluded: if you actually try to understand my code – which should really be about as easy as it gets –, and know some jQuery, you should be able to add that on your own. Afterall, this shouldn't be taken as free coding services. You do need to have the desire to actually learn.