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

This site is best viewed in a modern browser with JavaScript enabled.

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

asifakhtar

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.

I have a different id for the Inner Table

I am only providing HTML of the Inner Table:

<table width="100%" border="0" id="Tab_13322918">
<tbody>
    <tr>
        <td style="font-size:10px;color:brown">
            <input type="checkbox" value="08:00 AM - 09:00 AM"> 08:00 AM - 09:00 AM
        </td>
        <td style="font-size:10px;color:brown">
            <input type="checkbox" value="09:00 AM - 10:00 AM"> 09:00 AM - 10:00 AM
        </td>
    </tr>
    <tr>
        <td style="font-size:10px;color:brown">
            <input type="checkbox" value="12:00 PM - 01:00 PM"> 12:00 PM - 01:00 PM
        </td>
        <td style="font-size:10px;color:brown">
            <input type="checkbox" value="01:00 PM - 02:00 PM"> 01:00 PM - 02:00 PM
        </td>
    </tr>
    <tr>
        <td style="font-size:10px;color:brown">
            <input type="checkbox" value="02:00 PM - 03:00 PM"> 02:00 PM - 03:00 PM
        </td>
    </tr>
</tbody>

Please see pic for more info.[ATTACH]15741[/ATTACH]

The attachments of this post were removed during the platform migration in 2018

Airblader

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

(function () {
    var Status = {
        NOT_YET_STARTED: 0,
        IN_PROGRESS: 1,
        ENDED: 2
    };

$('input[type=checkbox]').on('click', function (event) {
    var $checkboxes = $(this).closest('table').find('input[type=checkbox]'),
        status = Status.NOT_YET_STARTED;
    $checkboxes.each(function (index, element) {
        if ($(this).prop('checked')) {
            switch (status) {
                case Status.NOT_YET_STARTED:
                    status = Status.IN_PROGRESS;
                    break;
                case Status.ENDED:
                    event.preventDefault();
                    break;
            }
        } else if (status === Status.IN_PROGRESS) {
            status = Status.ENDED;
        }
    });
});
})();

Example: http://jsfiddle.net/Q6ExD/1/

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

I haven't tested this but you might want to try it. Send the id of the table as the first and only argument of the function.

function setTable(tableId){
    var inp, tab, len, i;
    tab = document.getElementById(tableId);
    inp = tab.getElementsByTagName('input');
    len = inp.length;

for(i = 0; i < len; i++){
inp[i].onclick = function(){
    var opt, j, jL, topFlag, erase;
    topFlag = false;
    erase = false;
    opt = tab.getElementsByTagName('input');
    jL = opt.length;
    for(j = 0; j < jL; j++){
	if(!topFlag && opt[j].checked){
	    topFlag = true;
	    continue;
	}
	if(topFlag && !opt[j].checked){
	    erase = true;
	}
	if(erase){
	    opt[j].checked = false;
	}
    }
}
}
}

Airblader

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

asifakhtar

Airblader;1284085 wrote:
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):
(function () {
    var Status = {
        NOT_YET_STARTED: 0,
        IN_PROGRESS: 1,
        ENDED: 2
    };

$('input[type=checkbox]').on('click', function (event) {
    var $checkboxes = $(this).closest('table').find('input[type=checkbox]'),
        status = Status.NOT_YET_STARTED;
    $checkboxes.each(function (index, element) {
        if ($(this).prop('checked')) {
            switch (status) {
                case Status.NOT_YET_STARTED:
                    status = Status.IN_PROGRESS;
                    break;
                case Status.ENDED:
                    event.preventDefault();
                    break;
            }
        } else if (status === Status.IN_PROGRESS) {
            status = Status.ENDED;
        }
    });
});
})();
Example: http://jsfiddle.net/Q6ExD/1/

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.

Airblader

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.

Padonak

i'm not sure, but try this

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>checkboxes</title>
<style type="text/css">
body{color:#000;background-color:#fff;font-family:'Bookman Old Style',Georgia,Verdana;font-size:12px;text-align:center;padding-top:200px;}
table.subtab{margin-top:50px;border:1px dashed #ccc;width:30%}
table.subtab td{font-size:10px;color:Brown;}
</style>
<script type="text/javascript">
function check_boxes(obj){
if(obj.checked==false){return;}
else{
var tab=obj.parentNode.parentNode.parentNode.parentNode,
ii=tab.getElementsByTagName('input'),
index=0;
for(var z=0;z<ii.length;z++){if(ii[z]===obj){index=z;break;}else{continue;}}
for(var n=0;n<ii.length;n++){
if(ii[n]===obj || ii[n].checked==false){continue;}
else{if(n-1!=index && n+1!=index){ii[n].checked=false;}}
}
}
}

window.onload=function(){
var inp=document.getElementsByTagName('input');
for(var i=0;i<inp.length;i++){
if(inp[i].value.indexOf(' - ')==-1){continue;}
else{inp[i].onchange=function(){check_boxes(this);}}
}
}
</script>
</head>
<body>
<table align="center" class="subtab" id="Tab_13322918">
<tbody>
    <tr>
        <td>
            <input type="checkbox" value="08:00 AM - 09:00 AM"> 08:00 AM - 09:00 AM
        </td>
        <td>
            <input type="checkbox" value="09:00 AM - 10:00 AM"> 09:00 AM - 10:00 AM
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" value="12:00 PM - 01:00 PM"> 12:00 PM - 01:00 PM
        </td>
        <td>
            <input type="checkbox" value="01:00 PM - 02:00 PM"> 01:00 PM - 02:00 PM
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" value="02:00 PM - 03:00 PM"> 02:00 PM - 03:00 PM
        </td>
    </tr>
</tbody>
</table>
<table align="center" class="subtab" id="Tab_13322919">
<tbody>
    <tr>
        <td>
            <input type="checkbox" value="08:00 AM - 09:00 AM"> 08:00 AM - 09:00 AM
        </td>
        <td>
            <input type="checkbox" value="09:00 AM - 10:00 AM"> 09:00 AM - 10:00 AM
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" value="12:00 PM - 01:00 PM"> 12:00 PM - 01:00 PM
        </td>
        <td>
            <input type="checkbox" value="01:00 PM - 02:00 PM"> 01:00 PM - 02:00 PM
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" value="02:00 PM - 03:00 PM"> 02:00 PM - 03:00 PM
        </td>
    </tr>
</tbody>
</table>
</body>
</html>

asifakhtar

Airblader;1284093 wrote:
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"

Airblader

You are using an out-dated version of jQuery then. Either upgrade (recommended) or change 'on' to the deprecated version 'live'.

asifakhtar

Airblader;1284099 wrote:
You are using an out-dated version of jQuery then. Either upgrade (recommended) or change 'on' to the deprecated version 'live'.

It is working fine and that is what I want but I have a problem. I have another checkbox in the first column of my MainTable which I want to filterout in this process.

Padonak

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

asifakhtar

Padonak;1284157 wrote:
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

In your solution I can select "09:00 AM - 10:00 AM" and "12:00 PM - 01:00 PM" which I don't want.

By consecutive checkboxes I mean consecutive times and no gap in between.

Padonak

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

try the updated one

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>checkboxes</title>
<style type="text/css">
body{color:#000;background-color:#fff;font-family:'Bookman Old Style',Georgia,Verdana;font-size:12px;text-align:center;padding-top:200px;}
table.subtab{margin-top:50px;border:1px dashed #ccc;width:30%}
table.subtab td{font-size:10px;color:Brown;}
</style>
<script type="text/javascript">
function check_boxes(obj){
if(obj.checked==false){return;}
else{
var tab=obj.parentNode.parentNode.parentNode.parentNode,
ii=tab.getElementsByTagName('input'),
index=0;
for(var z=0;z<ii.length;z++){if(ii[z]===obj){index=z;break;}else{continue;}}
for(var n=0;n<ii.length;n++){
if(ii[n]===obj || ii[n].checked==false){continue;}
else{if(n-1!=index && n+1!=index){ii[n].checked=false;}}
}
var prev=ii[index-1],next=ii[index+1],
o_stime=obj.value.substring(0,obj.value.indexOf(' - ')),
o_etime=obj.value.substring(obj.value.lastIndexOf(':')-2,obj.value.length);
if(prev && prev.checked==true){
if(prev.value.substring(prev.value.lastIndexOf(':')-2,prev.value.length)!==o_stime){prev.checked=false;}
}
if(next && next.checked==true){
if(next.value.substring(0,next.value.indexOf(' - '))!==o_etime){next.checked=false;}
}
}
}

window.onload=function(){
var inp=document.getElementsByTagName('input');
for(var i=0;i<inp.length;i++){
if(inp[i].value.indexOf(' - ')==-1){continue;}
else{inp[i].onchange=function(){check_boxes(this);}}
}
}
</script>
</head>
<body>
<table align="center" class="subtab" id="Tab_13322918">
<tbody>
    <tr>
        <td>
            <input type="checkbox" value="08:00 AM - 09:00 AM"> 08:00 AM - 09:00 AM
        </td>
        <td>
            <input type="checkbox" value="09:00 AM - 10:00 AM"> 09:00 AM - 10:00 AM
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" value="12:00 PM - 01:00 PM"> 12:00 PM - 01:00 PM
        </td>
        <td>
            <input type="checkbox" value="01:00 PM - 02:00 PM"> 01:00 PM - 02:00 PM
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" value="02:00 PM - 03:00 PM"> 02:00 PM - 03:00 PM
        </td>
    </tr>
</tbody>
</table>
<table align="center" class="subtab" id="Tab_13322919">
<tbody>
    <tr>
        <td>
            <input type="checkbox" value="08:00 AM - 09:00 AM"> 08:00 AM - 09:00 AM
        </td>
        <td>
            <input type="checkbox" value="09:00 AM - 10:00 AM"> 09:00 AM - 10:00 AM
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" value="12:00 PM - 01:00 PM"> 12:00 PM - 01:00 PM
        </td>
        <td>
            <input type="checkbox" value="01:00 PM - 02:00 PM"> 01:00 PM - 02:00 PM
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" value="02:00 PM - 03:00 PM"> 02:00 PM - 03:00 PM
        </td>
    </tr>
</tbody>
</table>
</body>
</html>

Airblader

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.

asifakhtar

Airblader;1284099 wrote:
You are using an out-dated version of jQuery then. Either upgrade (recommended) or change 'on' to the deprecated version 'live'.

Thanks it is working. I am very thankful to you. I excluded the checkbox which I didn't want to be included in the process. Again Thanks.