Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 36
  1. #1
    Regular Coder
    Join Date
    Feb 2009
    Posts
    121
    Thanks
    7
    Thanked 0 Times in 0 Posts

    How can I validate checkboxes in a table against the following conditions?

    Hi,
    I am taking user availability in hours for a whole day in which a user can select the hours he is available for.

    How can I validate checkboxes in a table against the following conditions? All the following conditions should be true to proceed.

    1. The minimum time span should be consecutive 1 hour (eg. 08:30 AM - 09:00 AM & 09:00 AM - 09:30 AM). Can’t be 08:30 AM - 09:00 AM & 11:30 AM - 12:00 PM to make an hour

    2. The user can select multiple hours times in between(eg. 08:30 AM - 09:00 AM & 09:00 AM - 09:30 AM and 05:00 PM - 05:30 PM & 05:30 PM - 06:00 PM)

    Code:
    <table width="500px" cellspacing="1" id="AvailableTimesTable" style="margin-top: 5px;border: 1px solid black;">
        <tbody>
            <tr>
                <td class="LightBoxHeadingCell" colspan="2">
                    Available Times : 
                </td>
            </tr>
            <tr>
                <td class="AvailableTimes">
                    <input type="checkbox" value="08:00 AM - 08:30 AM;" id="Chk_0800_0830">08:00 AM - 08:30 AM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="08:30 AM - 09:00 AM;" id="Chk_0830_0900">08:30 AM - 09:00 AM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="09:00 AM - 09:30 AM;" id="Chk_0900_0930">09:00 AM - 09:30 AM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="09:30 AM - 10:00 AM;" id="Chk_0930_1000">09:30 AM - 10:00 AM 
                </td>
            </tr>
            <tr>
                <td class="AvailableTimes">
                    <input type="checkbox" value="10:00 AM - 10:30 AM;" id="Chk_1000_1030">10:00 AM - 10:30 AM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="10:30 AM - 11:00 AM;" id="Chk_1030_1100">10:30 AM - 11:00 AM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="11:00 AM - 11:30 AM;" id="Chk_1100_1130">11:00 AM - 11:30 AM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="11:30 AM - 12:00 PM;" id="Chk_1130_1200">11:30 AM - 12:00 PM 
                </td>
            </tr>
            <tr>
                <td class="AvailableTimes">
                    <input type="checkbox" value="12:00 PM - 12:30 PM;" id="Chk_1200_1230">12:00 PM - 12:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="12:30 PM - 01:00 PM;" id="Chk_1230_0100">12:30 PM - 01:00 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="01:00 PM - 01:30 PM;" id="Chk_0100_0130">01:00 PM - 01:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="01:30 PM - 02:00 PM;" id="Chk_0130_0200">01:30 PM - 02:00 PM 
                </td>
            </tr>
            <tr>
                <td class="AvailableTimes">
                    <input type="checkbox" value="02:00 PM - 02:30 PM;" id="Chk_0200_0230">02:00 PM - 02:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="02:30 PM - 03:00 PM;" id="Chk_0230_0300">02:30 PM - 03:00 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="03:00 PM - 03:30 PM;" id="Chk_0300_0330">03:00 PM - 03:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="03:30 PM - 04:00 PM;" id="Chk_0330_0400">03:30 PM - 04:00 PM 
                </td>
            </tr>
            <tr>
                <td class="AvailableTimes">
                    <input type="checkbox" value="04:00 PM - 04:30 PM;" id="Chk_0400_0430">04:00 PM - 04:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="04:30 PM - 05:00 PM;" id="Chk_0430_0500">04:30 PM - 05:00 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="05:00 PM - 05:30 PM;" id="Chk_0500_0530">05:00 PM - 05:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="05:30 PM - 06:00 PM;" id="Chk_0530_0600">05:30 PM - 06:00 PM 
                </td>
                <td class="AvailableTimes">
                    &nbsp; 
                </td>
                <td class="AvailableTimes">
                    &nbsp; 
                </td>
            </tr>
        </tbody>
    </table>
    Thanks

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,917
    Thanks
    56
    Thanked 545 Times in 542 Posts
    why not just make the available time spans one hour long instead of half an hour?

  • #3
    Regular Coder
    Join Date
    Feb 2009
    Posts
    121
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    why not just make the available time spans one hour long instead of half an hour?
    because a user can be available from 9:30 to 10:30.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,917
    Thanks
    56
    Thanked 545 Times in 542 Posts
    and you can't provide that option?

    this may seem niggling, but to me it speaks to a serious usability problem on the web. If you need to explain how to use your page with a whole separate set of instructions (which you would in this case, or else have to explain why the user's choice is not validating, or else just leave it to them to figure out for themselves) then you've already lost. Nobody reads instructions. They check boxes, click buttons, see what happens and if it's not what they expect, maybe they investigate why not.

    My idea is that it's your job as designer to make the page as intuitive as possible - it's not the user's job to try and figure out what it was that you were thinking when you made the page.

  • #5
    Regular Coder
    Join Date
    Feb 2009
    Posts
    121
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    and you can't provide that option?

    this may seem niggling, but to me it speaks to a serious usability problem on the web. If you need to explain how to use your page with a whole separate set of instructions (which you would in this case, or else have to explain why the user's choice is not validating, or else just leave it to them to figure out for themselves) then you've already lost. Nobody reads instructions. They check boxes, click buttons, see what happens and if it's not what they expect, maybe they investigate why not.

    My idea is that it's your job as designer to make the page as intuitive as possible - it's not the user's job to try and figure out what it was that you were thinking when you made the page.
    I can provide both options such as 08:00 AM - 09:00 AM and 08:30 AM - 09:30 AM but if a user selects both options then 08:30 is a duplicate time here.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,917
    Thanks
    56
    Thanked 545 Times in 542 Posts
    I don't see that condition in your first post.

    So if one time span is chosen, another time span that overlaps the first time span can't be chosen? Does the earlier one always "win" or do you ask them to do over?

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,340 Times in 4,306 Posts
    Important question: *CAN* the user select *THREE* half hour segments in a row, to choose a 90 minute window??
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,340 Times in 4,306 Posts
    Assuming the answer to my question in just prior post is "yes", then:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <form id="myForm">
    
    <table cellspacing="1"  style="margin-top: 5px;border: 1px solid black;">
        <tbody>
            <tr>
                <td class="LightBoxHeadingCell" colspan="2">
                    Available Times : 
                </td>
            </tr>
            <tr>
                <td class="AvailableTimes">
                    <input name="halfHour" type="checkbox" value="08:00 AM - 08:30 AM;" >08:00 AM - 08:30 AM 
                </td>
                <td class="AvailableTimes">
                    <input name="halfHour" type="checkbox" value="08:30 AM - 09:00 AM;" >08:30 AM - 09:00 AM 
                </td>
                <td class="AvailableTimes">
                    <input name="halfHour" type="checkbox" value="09:00 AM - 09:30 AM;" >09:00 AM - 09:30 AM 
                </td>
                <td class="AvailableTimes">
                    <input name="halfHour" type="checkbox" value="09:30 AM - 10:00 AM;" >09:30 AM - 10:00 AM 
                </td>
            </tr>
            <tr>
                <td class="AvailableTimes">
                    <input name="halfHour" type="checkbox" value="10:00 AM - 10:30 AM;" >10:00 AM - 10:30 AM 
                </td>
                <td class="AvailableTimes">
                    <input name="halfHour" type="checkbox" value="10:30 AM - 11:00 AM;" >10:30 AM - 11:00 AM 
                </td>
                <td class="AvailableTimes">
                    <input name="halfHour" type="checkbox" value="11:00 AM - 11:30 AM;" >11:00 AM - 11:30 AM 
                </td>
                <td class="AvailableTimes">
                    <input name="halfHour" type="checkbox" value="11:30 AM - 12:00 PM;" >11:30 AM - 12:00 PM 
                </td>
            </tr>
            <tr>
                <td class="AvailableTimes">
                    <input name="halfHour" type="checkbox" value="12:00 PM - 12:30 PM;" >12:00 PM - 12:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input name="halfHour" type="checkbox" value="12:30 PM - 01:00 PM;" >12:30 PM - 01:00 PM 
                </td>
                <td class="AvailableTimes">
                    <input name="halfHour" type="checkbox" value="01:00 PM - 01:30 PM;" >01:00 PM - 01:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input name="halfHour" type="checkbox" value="01:30 PM - 02:00 PM;" >01:30 PM - 02:00 PM 
                </td>
            </tr>
            <tr>
                <td class="AvailableTimes">
                    <input name="halfHour" type="checkbox" value="02:00 PM - 02:30 PM;" >02:00 PM - 02:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input name="halfHour" type="checkbox" value="02:30 PM - 03:00 PM;" >02:30 PM - 03:00 PM 
                </td>
                <td class="AvailableTimes">
                    <input name="halfHour" type="checkbox" value="03:00 PM - 03:30 PM;" >03:00 PM - 03:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input name="halfHour" type="checkbox" value="03:30 PM - 04:00 PM;" >03:30 PM - 04:00 PM 
                </td>
            </tr>
            <tr>
                <td class="AvailableTimes">
                    <input name="halfHour" type="checkbox" value="04:00 PM - 04:30 PM;" >04:00 PM - 04:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input name="halfHour" type="checkbox" value="04:30 PM - 05:00 PM;" >04:30 PM - 05:00 PM 
                </td>
                <td class="AvailableTimes">
                    <input name="halfHour" type="checkbox" value="05:00 PM - 05:30 PM;" >05:00 PM - 05:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input name="halfHour" type="checkbox" value="05:30 PM - 06:00 PM;" >05:30 PM - 06:00 PM 
                </td>
                <td class="AvailableTimes">
                    &nbsp; 
                </td>
                <td class="AvailableTimes">
                    &nbsp; 
                </td>
            </tr>
        </tbody>
    </table>
    <input type="button" value="check and submit" name="checkit" />
    
    </form>
    
    <script type="text/javascript">
    var form = document.getElementById("myForm");
    form.checkit.onclick = function()
    {
        var cbs = form.halfHour;
        var c = 0;
        var any = false;
        while ( c < cbs.length )
        {
            if ( cbs[c].checked )
            {
                // next one must also be checked
                if ( c == cbs.length-1 || ! cbs[c+1].checked )
                {
                    alert("Only half an hour selected at " + cbs[c].value);
                    return;
                }
                any = true;
                // but then it is okay if any number of subsequent are checked
                while ( ++c < cbs.length - 1 )
                {
                    if ( ! cbs[c+1].checked ) break;
                }
            }
            ++c;
        }
        if ( ! any )
        {
            alert("You did not choose any times");
            return;
        }
        // if we are submitting the form, we would do it here
        alert("All okay");
        // form.submit( );
    }
            
    </script>
    </body>
    </html>
    But if the times can only be selected in 1-hour blocks (no 90 minute blocks) then I'd agree with Xelawho that the UI needs to be changed.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Regular Coder
    Join Date
    Feb 2009
    Posts
    121
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Important question: *CAN* the user select *THREE* half hour segments in a row, to choose a 90 minute window??
    No. A user can only select blocks of 1 hour.

    If UI needs to be change then what do you guys suggest?

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,917
    Thanks
    56
    Thanked 545 Times in 542 Posts
    another pet hate of mine: forms that let you do things and then, on "validation" tell you that what you've done isn't allowed.

    If you're not allowed to pick two timeslots in a row, don't let them. Here's a jQuery solution - obviously it can be done in vanilla js, I'm just feeling lazy and quite like jQuery for traversing the DOM cross-browser...

    Code:
    <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    </head>
    <body>
    <table width="500px" cellspacing="1" id="AvailableTimesTable" style="margin-top: 5px;border: 1px solid black;">
        <tbody>
            <tr>
                <td class="LightBoxHeadingCell" colspan="2">
                    Available Times : 
                </td>
            </tr>
            <tr>
                <td class="AvailableTimes">
                    <input type="checkbox" value="08:00 AM - 9:00 AM;" id="Chk_0800_0830">08:00 AM - 09:00 AM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="08:30 AM - 09:00 AM;" id="Chk_0830_0900">08:30 AM - 09:30 AM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="09:00 AM - 09:30 AM;" id="Chk_0900_0930">09:00 AM - 10:00 AM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="09:30 AM - 10:00 AM;" id="Chk_0930_1000">09:30 AM - 10:30 AM 
                </td>
            </tr>
            <tr>
                <td class="AvailableTimes">
                    <input type="checkbox" value="10:00 AM - 10:30 AM;" id="Chk_1000_1030">10:00 AM - 11:00 AM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="10:30 AM - 11:00 AM;" id="Chk_1030_1100">10:30 AM - 11:30 AM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="11:00 AM - 11:30 AM;" id="Chk_1100_1130">11:00 AM - 12:00PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="11:30 AM - 12:00 PM;" id="Chk_1130_1200">11:30 PM - 12:30 PM 
                </td>
            </tr>
            <tr>
                <td class="AvailableTimes">
                    <input type="checkbox" value="12:00 PM - 12:30 PM;" id="Chk_1200_1230">12:00 PM - 1:00 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="12:30 PM - 01:00 PM;" id="Chk_1230_0100">12:30 PM - 01:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="01:00 PM - 01:30 PM;" id="Chk_0100_0130">01:00 PM - 02:00 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="01:30 PM - 02:00 PM;" id="Chk_0130_0200">02:30 PM - 03:30 PM 
                </td>
            </tr>
            <tr>
                <td class="AvailableTimes">
                    <input type="checkbox" value="02:00 PM - 02:30 PM;" id="Chk_0200_0230">02:00 PM - 02:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="02:30 PM - 03:00 PM;" id="Chk_0230_0300">02:30 PM - 03:00 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="03:00 PM - 03:30 PM;" id="Chk_0300_0330">03:00 PM - 03:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="03:30 PM - 04:00 PM;" id="Chk_0330_0400">03:30 PM - 04:00 PM 
                </td>
            </tr>
            <tr>
                <td class="AvailableTimes">
                    <input type="checkbox" value="04:00 PM - 04:30 PM;" id="Chk_0400_0430">04:00 PM - 04:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="04:30 PM - 05:00 PM;" id="Chk_0430_0500">04:30 PM - 05:00 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="05:00 PM - 05:30 PM;" id="Chk_0500_0530">05:00 PM - 05:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input type="checkbox" value="05:30 PM - 06:00 PM;" id="Chk_0530_0600">05:30 PM - 06:00 PM 
                </td>
                <td class="AvailableTimes">
                    &nbsp; 
                </td>
                <td class="AvailableTimes">
                    &nbsp; 
                </td>
            </tr>
        </tbody>
    </table>
    
    <script>
    $("input[type='checkbox']").on("click",function(){
    if($(this).parent().prev().find("input[type='checkbox']").is(":checked")
    ||$(this).parent().next().find("input[type='checkbox']").is(":checked")){
    $(this).attr("checked",false);
    	}
    });
    </script> 
    </body>
    </html>

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,340 Times in 4,306 Posts
    I have no idea *WHY* you would want to give each checkbox an ID.

    It's utterly pointless.

    Just give them all the same name and keep it simple.

    Here it is in non-jQuery code:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <form id="myForm">
    
    <table cellspacing="1"  style="margin-top: 5px;border: 1px solid black;">
        <tbody>
            <tr>
                <td class="LightBoxHeadingCell" colspan="2">
                    Available Times : 
                </td>
            </tr>
            <tr>
                <td class="AvailableTimes">
                    <input name="hourSlot" type="checkbox" value="08:00 AM" >08:00 AM - 9:00 AM 
                </td>
                <td class="AvailableTimes">
                    <input name="hourSlot" type="checkbox" value="08:30 AM" >08:30 AM - 09:30 AM 
                </td>
                <td class="AvailableTimes">
                    <input name="hourSlot" type="checkbox" value="09:00 AM" >09:00 AM - 10:00 AM 
                </td>
                <td class="AvailableTimes">
                    <input name="hourSlot" type="checkbox" value="09:30 AM" >09:30 AM - 10:30 AM 
                </td>
            </tr>
            <tr>
                <td class="AvailableTimes">
                    <input name="hourSlot" type="checkbox" value="10:00 AM" >10:00 AM - 11:00 AM 
                </td>
                <td class="AvailableTimes">
                    <input name="hourSlot" type="checkbox" value="10:30 AM" >10:30 AM - 11:30 AM 
                </td>
                <td class="AvailableTimes">
                    <input name="hourSlot" type="checkbox" value="11:00 AM" >11:00 AM - Noon 
                </td>
                <td class="AvailableTimes">
                    <input name="hourSlot" type="checkbox" value="11:30 AM" >11:30 AM - 12:30 PM 
                </td>
            </tr>
            <tr>
                <td class="AvailableTimes">
                    <input name="hourSlot" type="checkbox" value="12:00 PM" >Noon - 1:00 PM 
                </td>
                <td class="AvailableTimes">
                    <input name="hourSlot" type="checkbox" value="12:30 PM" >12:30 PM - 01:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input name="hourSlot" type="checkbox" value="01:00 PM" >01:00 PM - 02:00 PM 
                </td>
                <td class="AvailableTimes">
                    <input name="hourSlot" type="checkbox" value="01:30 PM" >01:30 PM - 02:30 PM 
                </td>
            </tr>
            <tr>
                <td class="AvailableTimes">
                    <input name="hourSlot" type="checkbox" value="02:00 PM" >02:00 PM - 03:00 PM 
                </td>
                <td class="AvailableTimes">
                    <input name="hourSlot" type="checkbox" value="02:30 PM" >02:30 PM - 03:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input name="hourSlot" type="checkbox" value="03:00 PM" >03:00 PM - 04:00 PM 
                </td>
                <td class="AvailableTimes">
                    <input name="hourSlot" type="checkbox" value="03:30 PM" >03:30 PM - 04:30 PM 
                </td>
            </tr>
            <tr>
                <td class="AvailableTimes">
                    <input name="hourSlot" type="checkbox" value="04:00 PM" >04:00 PM - 05:00 PM 
                </td>
                <td class="AvailableTimes">
                    <input name="hourSlot" type="checkbox" value="04:30 PM" >04:30 PM - 05:30 PM 
                </td>
                <td class="AvailableTimes">
                    <input name="hourSlot" type="checkbox" value="05:00 PM" >05:00 PM - 06:00 PM 
                </td>
                <td class="AvailableTimes">
                    &nbsp;
                </td>
                <td class="AvailableTimes">
                    &nbsp; 
                </td>
                <td class="AvailableTimes">
                    &nbsp; 
                </td>
            </tr>
        </tbody>
    </table>
    
    </form>
    
    <script type="text/javascript">
    var form = document.getElementById("myForm");
    var slots = form.hourSlot;
    for ( var s = 0; s < slots.length; ++s )
    {
        slots[s].onclick = choose;
    }
    function choose( )
    {
        for ( var s = 0; s < slots.length; ++s )
        {
            var slot = slots[s];
            if ( slot == this )
            {
                if ( s > 0 ) { slots[s-1].checked = false; }
                if ( s < slots.length-1 ) { slots[s+1].checked = false; }
                break; // added this:  no point in continuing the loop
            }
        }
    }
    </script>
    </body>
    </html>
    Last edited by Old Pedant; 06-27-2013 at 03:27 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,340 Times in 4,306 Posts
    Xelawho: Does that code really work???

    I am surprised the jQuery doesn't barf on this:
    Code:
    $(this).parent().next().find("input[type='checkbox']").is(":checked")
    when the user clicks the last checkbox. Because then next() gets the <td> that does *NOT* contain a checkbox, so the find() finds notthing, and then you are calling .is(":checked") on a null object.

    Does jQuery really simply ignore calls made on null objects?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,917
    Thanks
    56
    Thanked 545 Times in 542 Posts
    I know. I was checking for null objects first and then I thought...hmmm I wonder if jQuery will take care of that... and there is no error thrown on on clicking the first or last checkbox.

    I think it's because a jQuery makes collections instead of gathering objects, so testing for
    Code:
    if ($("#foo"))
    will always return true even if there is no element with an id "foo" because that's just a collection, it's not a real DOM object - you have to do
    Code:
    $("#foo")[0]
    to turn it into a DOM element, or
    Code:
    if ($("#foo").size()>0)
    to test if the collection is not empty (ie, the element does in fact exist)

    that's the way I understand it works, anyway. Could be completely wrong. The posted code works, though - feel free to give it a run

  • #14
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,917
    Thanks
    56
    Thanked 545 Times in 542 Posts
    nice idea on the +1, -1 routine, by the way - for completeness' sake, here's the jQuery version of that (again, no need to check for null elements, which makes me suspect that my whole "collection" explanation is a little off)

    Code:
    <script>
    var boxes =$("#AvailableTimesTable input[type='checkbox']");
    
    $("input[type='checkbox']").on("click",function(){
    var index = boxes.index(this);
    $(boxes.get(index-1)).attr("checked",false);
    $(boxes.get(index+1)).attr("checked",false);
    });
    </script>

  • #15
    Regular Coder
    Join Date
    Feb 2009
    Posts
    121
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thank you xelawho & Old Pedant. All your recommended solutions work. By the way I am going with Old Pedant’ solution.

    Again thank you very much for all your effort.


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

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