www.webdeveloper.com
Results 1 to 15 of 15

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

  1. #1
    Join Date
    Feb 2009
    Posts
    93

    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.

    I have a different id for the Inner Table

    I am only providing HTML of the Inner Table:

    Code:
    <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.Attachment 15741
    Attached Images Attached Images

  2. #2
    Join Date
    Jul 2013
    Posts
    66
    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):

    Code:
    (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.
    Last edited by Airblader; 08-20-2013 at 01:07 PM.

  3. #3
    Join Date
    Mar 2009
    Posts
    431
    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.
    Code:
    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;
    		}
    	    }
    	}
        }
    }

  4. #4
    Join Date
    Jul 2013
    Posts
    66
    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).

  5. #5
    Join Date
    Feb 2009
    Posts
    93
    Quote Originally Posted by Airblader View Post
    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):

    Code:
    (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.

  6. #6
    Join Date
    Jul 2013
    Posts
    66
    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.

  7. #7
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,637
    i'm not sure, but try this

    Code:
    <!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>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  8. #8
    Join Date
    Feb 2009
    Posts
    93
    Quote Originally Posted by Airblader View Post
    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"

  9. #9
    Join Date
    Jul 2013
    Posts
    66
    You are using an out-dated version of jQuery then. Either upgrade (recommended) or change 'on' to the deprecated version 'live'.

  10. #10
    Join Date
    Feb 2009
    Posts
    93
    Quote Originally Posted by Airblader View Post
    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.

  11. #11
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,637
    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

  12. #12
    Join Date
    Feb 2009
    Posts
    93
    Quote Originally Posted by Padonak View Post
    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.

  13. #13
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,637
    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

    Code:
    <!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>
    Last edited by Padonak; 08-21-2013 at 09:42 AM.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  14. #14
    Join Date
    Jul 2013
    Posts
    66
    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.

  15. #15
    Join Date
    Feb 2009
    Posts
    93
    Quote Originally Posted by Airblader View Post
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles