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 2 of 3 FirstFirst 123 LastLast
Results 16 to 30 of 36
  1. #16
    Regular Coder
    Join Date
    Feb 2009
    Posts
    121
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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>

    “Old Pedant” I implemented you code in my application and it is working fine but I also want to give them an option to check/uncheck all checkboxes which are not checked and are not disabled(Should meet both conditions to check/uncheck checkboxes) and to maintain my old conditions you already met.

    When a user opens an already created slot I am making all the appropriate checkboxes checked and only making the checkboxes disabled where the time has been booked.

    For example if a user checked “08:00 AM - 09:00 AM” and “09:00 AM - 10:00 AM “ and “10:00 AM - 11:00 AM” and “02:00 PM - 03:00 PM” and “04:00 PM - 05:00 PM” when he was creating a slot then when he opens the same one then I checked and disabled “08:00 AM - 09:00 AM” and “10:00 AM - 11:00 AM” and checked only(Not Disabled) “09:00 AM - 10:00 AM “and “02:00 PM - 03:00 PM” and “04:00 PM - 05:00 PM” and I want to give him an option to check/uncheck.

    Please make sure that “08:00 AM - 09:00 AM” and “10:00 AM - 11:00 AM” shouldn’t be unchecked at all because these have been booked.

    Please see the picture for more info.
    Attached Thumbnails Attached Thumbnails How can I validate checkboxes in a table against the following conditions?-untitled.png  

  2. #17
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Quote Originally Posted by Old Pedant View Post
    Does jQuery really simply ignore calls made on null objects?
    jQuery will never return a null object (for those methods that return the jQuery object for chainability). It will return an empty object as xelawho pointed out.

    These will not throw errors:
    Code:
    $().is(':checked')
    $().closest('foo').next('bar').find('hello').html()
    $('foo').attr('id')
    $('bar').on('click', function() {})
    But these will:
    Code:
    $('foo').attr('id').replace(/hello/, 'hi') //attr('id') is undefined
    $('foo')[0].id  //$('foo')[0] is undefined

  3. #18
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Quote Originally Posted by xelawho View Post
    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>
    I haven't tried your code but instead of using .get() method which returns the DOM object and then turning it into a jQuery object again, you can use jQuery's .eq() method instead.

    Code:
    boxes.eq(index-1).prop('checked', false);
    boxes.eq(index+1).prop('checked', false);
    And it is recommended (for jQuery 1.6+) to use .prop() instead of .attr() for boolean attributes.

  4. #19
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,195
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Given that Airblader gave you the answer to this in another forum, and given that you seem to persist in cross-posting (and re-posting) the same questions all over the web, I'm not inclined to bother mucking with this code again.
    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.

  5. #20
    Regular Coder
    Join Date
    Feb 2009
    Posts
    121
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Given that Airblader gave you the answer to this in another forum, and given that you seem to persist in cross-posting (and re-posting) the same questions all over the web, I'm not inclined to bother mucking with this code again.
    I have stopped cross-posting and by the way Airblader gave me the answer to a different question in another forum. Again I apologize for cross-posting.

  6. #21
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,195
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    ??? This isn't the same problem/question??

    Really?

    It looks so much the same.

    *SIGH*

    Okay, I'll take a look at it, but later today.
    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.

  7. #22
    Regular Coder
    Join Date
    Feb 2009
    Posts
    121
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    ??? This isn't the same problem/question??

    Really?

    It looks so much the same.

    *SIGH*

    Okay, I'll take a look at it, but later today.
    The question on the other forum was "Need to restrict a user to check consecutive checkboxes inside each Inner Table."

  8. #23
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by asifakhtar View Post
    “Old Pedant” I implemented you code in my application and it is working fine but I also want to give them an option to check/uncheck all checkboxes which are not checked and are not disabled(Should meet both conditions to check/uncheck checkboxes) and to maintain my old conditions you already met.

    When a user opens an already created slot I am making all the appropriate checkboxes checked and only making the checkboxes disabled where the time has been booked.

    For example if a user checked “08:00 AM - 09:00 AM” and “09:00 AM - 10:00 AM “ and “10:00 AM - 11:00 AM” and “02:00 PM - 03:00 PM” and “04:00 PM - 05:00 PM” when he was creating a slot then when he opens the same one then I checked and disabled “08:00 AM - 09:00 AM” and “10:00 AM - 11:00 AM” and checked only(Not Disabled) “09:00 AM - 10:00 AM “and “02:00 PM - 03:00 PM” and “04:00 PM - 05:00 PM” and I want to give him an option to check/uncheck.

    Please make sure that “08:00 AM - 09:00 AM” and “10:00 AM - 11:00 AM” shouldn’t be unchecked at all because these have been booked.

    Please see the picture for more info.
    Here's one take:

    Live Demo: https://patrick.dark.name/web.dev/cf.../checkboxes.1/

    Code:
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <?xml-stylesheet type="application/xml" href="../style.sheets/boilerplate.xslt"?>
    <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:p="https://patrick.dark.name/">
    	<head>
    		<title>Demo for CodingForums.com Thread 297507: How can I validate checkboxes in a table against the following conditions?</title>
    		<p:title>Demo for CodingForums.com Thread 297507: <cite>How can I validate checkboxes in a table against the following conditions?</cite></p:title>
    		<style>
    			#demo h1 { margin-top: 0; color: hsla(0, 50%, 50%, 1); }
    			#demo fieldset { display: table; min-width: 48.5rem; }
    			#demo ul { display: table-row-group; overflow: auto; }
    			#demo li { display: block; float: left; min-width: 11rem; }
    			#demo li:nth-child(odd) { color: forestgreen; }
    			#demo li:nth-child(even) { color: hsla(240, 70%, 50%, 1); }
    			#demo li:nth-child(4n + 1) { clear: left; margin-left: 0; }
    			#demo button { float: left; border: thin solid gray; line-height: 1; }
    			#demo button + button { margin-left: 0.5rem; }
    		</style>
    		<script>
    			// <![CDATA[
    			// This script was validated at http://jshint.com/ using the following settings:
    			/* jshint curly: true, eqeqeq: true, forin: true, immed: true, latedef: true, noarg: true, noempty: true, nonew: true, plusplus: true, quotmark: double, undef: true, unused: strict, strict: true, trailing: true */
    			(function () {
    				"use strict";
    				var state = { checked: true, unchecked: false };
    				function make_selection_valid() {
    					/* jshint validthis: true */
    					if (this.checked) {
    						var list_item = this.parentNode.parentNode;
    						var previous_list_item = list_item.previousElementSibling;
    						var next_list_item = list_item.nextElementSibling;
    						var previous_checkbox = null;
    						var next_checkbox = null;
    						if (previous_list_item !== null && !previous_list_item.getElementsByTagName("input")[0].disabled) {
    							previous_checkbox = previous_list_item.getElementsByTagName("input")[0];
    							previous_checkbox.checked = false;
    						}
    						if (next_list_item !== null && !next_list_item.getElementsByTagName("input")[0].disabled) {
    							next_checkbox = next_list_item.getElementsByTagName("input")[0];
    							next_checkbox.checked = false;
    						}
    					}
    				}
    				function check_or_uncheck_all(event, checkboxes, new_state) {
    					event.preventDefault();
    					for (var i = 0; i < checkboxes.length; i += 1) {
    						checkboxes[i].checked = state.unchecked;
    						if (new_state === state.checked && /:00/.test(checkboxes[i].value)) {
    							checkboxes[i].checked = state.checked;
    						}
    					}
    				}
    				function initialize_script() {
    					var checkboxes = document.getElementById("available_times").querySelectorAll("[name='hourSlot']:enabled");
    					var check_all_button = document.getElementById("check_all_button");
    					var uncheck_all_button = document.getElementById("uncheck_all_button");
    					for (var i = 0; i < checkboxes.length; i += 1) {
    						checkboxes[i].addEventListener("click", make_selection_valid);
    					}
    					check_all_button.addEventListener("click", function (event) { check_or_uncheck_all(event, checkboxes, state.checked); });
    					uncheck_all_button.addEventListener("click", function (event) { check_or_uncheck_all(event, checkboxes, state.unchecked); });
    				}
    				document.addEventListener("DOMContentLoaded", initialize_script);
    			})();
    			// ]]>
    		</script>
    	</head>	
    	<body>
    		<section id="description">
    			<h1>Demo Description</h1>
    			<p>This demo features a script with three behaviors:</p>
    			<ul>
    				<li><p>The first behavior disallows selection of checkboxes representing overlapping time periods.</p></li>
    				<li><p>The second behavior enables instant selection of checkboxes representing all available time periods via a button. There may be 30‐minute gaps in coverage in cases where one or more <q><var>##</var>:30 &#x2013; <var>##</var>:30</q> options are selected and disabled.</p></li>
    				<li><p>The third behavior enables instant deselection of all checkboxes via a button.</p></li>
    			</ul>
    			<p>Disabled checkboxes are unaffected by any of the aforementioned behaviors.</p>
    		</section>
    		<section id="demo">
    			<form>
    				<fieldset id="available_times">
    					<h1>Available Times</h1>
    					<ul>
    						<li><label><input name="hourSlot" type="checkbox" value="08:00 AM" checked="checked" disabled="disabled"/> <time datetime="08:00">08:00 <abbr lang="la" title="ante meridiem">AM</abbr></time> &#x2013; <time datetime="09:00">09:00 <abbr lang="la" title="ante meridiem">AM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="08:30 AM" disabled="disabled"/> <time datetime="08:30">08:30 <abbr lang="la" title="ante meridiem">AM</abbr></time> &#x2013; <time datetime="09:30">09:30 <abbr lang="la" title="ante meridiem">AM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="09:00 AM" checked="checked"/> <time datetime="09:00">09:00 <abbr lang="la" title="ante meridiem">AM</abbr></time> &#x2013; <time datetime="10:00">10:00 <abbr lang="la" title="ante meridiem">AM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="09:30 AM" disabled="disabled"/> <time datetime="09:30">09:30 <abbr lang="la" title="ante meridiem">AM</abbr></time> &#x2013; <time datetime="10:30">10:30 <abbr lang="la" title="ante meridiem">AM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="10:00 AM" checked="checked" disabled="disabled"/> <time datetime="10:00">10:00 <abbr lang="la" title="ante meridiem">AM</abbr></time> &#x2013; <time datetime="11:00">11:00 <abbr lang="la" title="ante meridiem">AM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="10:30 AM" disabled="disabled"/> <time datetime="10:30">10:30 <abbr lang="la" title="ante meridiem">AM</abbr></time> &#x2013; <time datetime="11:30">11:30 <abbr lang="la" title="ante meridiem">AM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="11:00 AM"/> <time datetime="11:00">11:00 <abbr lang="la" title="ante meridiem">AM</abbr></time> &#x2013; <time datetime="12:00">12:00 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="11:30 AM"/> <time datetime="11:30">11:30 <abbr lang="la" title="ante meridiem">AM</abbr></time> &#x2013; <time datetime="12:30">12:30 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="12:00 PM"/> <time datetime="12:00">12:00 <abbr lang="la" title="post meridiem">PM</abbr></time> &#x2013; <time datetime="13:00">01:00 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="12:30 PM"/> <time datetime="12:30">12:30 <abbr lang="la" title="post meridiem">PM</abbr></time> &#x2013; <time datetime="13:30">01:30 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="01:00 PM"/> <time datetime="13:00">01:00 <abbr lang="la" title="post meridiem">PM</abbr></time> &#x2013; <time datetime="14:00">02:00 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="01:30 PM"/> <time datetime="13:30">01:30 <abbr lang="la" title="post meridiem">PM</abbr></time> &#x2013; <time datetime="14:30">02:30 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="02:00 PM" checked="checked"/> <time datetime="14:00">02:00 <abbr lang="la" title="post meridiem">PM</abbr></time> &#x2013; <time datetime="15:00">03:00 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="02:30 PM"/> <time datetime="14:30">02:30 <abbr lang="la" title="post meridiem">PM</abbr></time> &#x2013; <time datetime="15:30">03:00 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="03:00 PM"/> <time datetime="15:00">03:00 <abbr lang="la" title="post meridiem">PM</abbr></time> &#x2013; <time datetime="15:00">04:30 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="03:30 PM"/> <time datetime="15:30">03:30 <abbr lang="la" title="post meridiem">PM</abbr></time> &#x2013; <time datetime="16:30">04:00 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="04:00 PM" checked="checked"/> <time datetime="16:00">04:00 <abbr lang="la" title="post meridiem">PM</abbr></time> &#x2013; <time datetime="16:00">05:00 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="04:30 PM"/> <time datetime="16:00">04:00 <abbr lang="la" title="post meridiem">PM</abbr></time> &#x2013; <time datetime="16:30">05:30 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="05:00 PM"/> <time datetime="16:30">05:00 <abbr lang="la" title="post meridiem">PM</abbr></time> &#x2013; <time datetime="17:00">06:00 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    					</ul>
    					<button id="check_all_button">Check All</button>
    					<button id="uncheck_all_button">Uncheck All</button>
    				</fieldset>
    			</form>
    		</section>
    	</body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  9. #24
    Regular Coder
    Join Date
    Feb 2009
    Posts
    121
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    Here's one take:

    Live Demo: https://patrick.dark.name/web.dev/cf.../checkboxes.1/

    Code:
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <?xml-stylesheet type="application/xml" href="../style.sheets/boilerplate.xslt"?>
    <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:p="https://patrick.dark.name/">
    	<head>
    		<title>Demo for CodingForums.com Thread 297507: How can I validate checkboxes in a table against the following conditions?</title>
    		<p:title>Demo for CodingForums.com Thread 297507: <cite>How can I validate checkboxes in a table against the following conditions?</cite></p:title>
    		<style>
    			#demo h1 { margin-top: 0; color: hsla(0, 50%, 50%, 1); }
    			#demo fieldset { display: table; min-width: 48.5rem; }
    			#demo ul { display: table-row-group; overflow: auto; }
    			#demo li { display: block; float: left; min-width: 11rem; }
    			#demo li:nth-child(odd) { color: forestgreen; }
    			#demo li:nth-child(even) { color: hsla(240, 70%, 50%, 1); }
    			#demo li:nth-child(4n + 1) { clear: left; margin-left: 0; }
    			#demo button { float: left; border: thin solid gray; line-height: 1; }
    			#demo button + button { margin-left: 0.5rem; }
    		</style>
    		<script>
    			// <![CDATA[
    			// This script was validated at http://jshint.com/ using the following settings:
    			/* jshint curly: true, eqeqeq: true, forin: true, immed: true, latedef: true, noarg: true, noempty: true, nonew: true, plusplus: true, quotmark: double, undef: true, unused: strict, strict: true, trailing: true */
    			(function () {
    				"use strict";
    				var state = { checked: true, unchecked: false };
    				function make_selection_valid() {
    					/* jshint validthis: true */
    					if (this.checked) {
    						var list_item = this.parentNode.parentNode;
    						var previous_list_item = list_item.previousElementSibling;
    						var next_list_item = list_item.nextElementSibling;
    						var previous_checkbox = null;
    						var next_checkbox = null;
    						if (previous_list_item !== null && !previous_list_item.getElementsByTagName("input")[0].disabled) {
    							previous_checkbox = previous_list_item.getElementsByTagName("input")[0];
    							previous_checkbox.checked = false;
    						}
    						if (next_list_item !== null && !next_list_item.getElementsByTagName("input")[0].disabled) {
    							next_checkbox = next_list_item.getElementsByTagName("input")[0];
    							next_checkbox.checked = false;
    						}
    					}
    				}
    				function check_or_uncheck_all(event, checkboxes, new_state) {
    					event.preventDefault();
    					for (var i = 0; i < checkboxes.length; i += 1) {
    						checkboxes[i].checked = state.unchecked;
    						if (new_state === state.checked && /:00/.test(checkboxes[i].value)) {
    							checkboxes[i].checked = state.checked;
    						}
    					}
    				}
    				function initialize_script() {
    					var checkboxes = document.getElementById("available_times").querySelectorAll("[name='hourSlot']:enabled");
    					var check_all_button = document.getElementById("check_all_button");
    					var uncheck_all_button = document.getElementById("uncheck_all_button");
    					for (var i = 0; i < checkboxes.length; i += 1) {
    						checkboxes[i].addEventListener("click", make_selection_valid);
    					}
    					check_all_button.addEventListener("click", function (event) { check_or_uncheck_all(event, checkboxes, state.checked); });
    					uncheck_all_button.addEventListener("click", function (event) { check_or_uncheck_all(event, checkboxes, state.unchecked); });
    				}
    				document.addEventListener("DOMContentLoaded", initialize_script);
    			})();
    			// ]]>
    		</script>
    	</head>	
    	<body>
    		<section id="description">
    			<h1>Demo Description</h1>
    			<p>This demo features a script with three behaviors:</p>
    			<ul>
    				<li><p>The first behavior disallows selection of checkboxes representing overlapping time periods.</p></li>
    				<li><p>The second behavior enables instant selection of checkboxes representing all available time periods via a button. There may be 30‐minute gaps in coverage in cases where one or more <q><var>##</var>:30 &#x2013; <var>##</var>:30</q> options are selected and disabled.</p></li>
    				<li><p>The third behavior enables instant deselection of all checkboxes via a button.</p></li>
    			</ul>
    			<p>Disabled checkboxes are unaffected by any of the aforementioned behaviors.</p>
    		</section>
    		<section id="demo">
    			<form>
    				<fieldset id="available_times">
    					<h1>Available Times</h1>
    					<ul>
    						<li><label><input name="hourSlot" type="checkbox" value="08:00 AM" checked="checked" disabled="disabled"/> <time datetime="08:00">08:00 <abbr lang="la" title="ante meridiem">AM</abbr></time> &#x2013; <time datetime="09:00">09:00 <abbr lang="la" title="ante meridiem">AM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="08:30 AM" disabled="disabled"/> <time datetime="08:30">08:30 <abbr lang="la" title="ante meridiem">AM</abbr></time> &#x2013; <time datetime="09:30">09:30 <abbr lang="la" title="ante meridiem">AM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="09:00 AM" checked="checked"/> <time datetime="09:00">09:00 <abbr lang="la" title="ante meridiem">AM</abbr></time> &#x2013; <time datetime="10:00">10:00 <abbr lang="la" title="ante meridiem">AM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="09:30 AM" disabled="disabled"/> <time datetime="09:30">09:30 <abbr lang="la" title="ante meridiem">AM</abbr></time> &#x2013; <time datetime="10:30">10:30 <abbr lang="la" title="ante meridiem">AM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="10:00 AM" checked="checked" disabled="disabled"/> <time datetime="10:00">10:00 <abbr lang="la" title="ante meridiem">AM</abbr></time> &#x2013; <time datetime="11:00">11:00 <abbr lang="la" title="ante meridiem">AM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="10:30 AM" disabled="disabled"/> <time datetime="10:30">10:30 <abbr lang="la" title="ante meridiem">AM</abbr></time> &#x2013; <time datetime="11:30">11:30 <abbr lang="la" title="ante meridiem">AM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="11:00 AM"/> <time datetime="11:00">11:00 <abbr lang="la" title="ante meridiem">AM</abbr></time> &#x2013; <time datetime="12:00">12:00 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="11:30 AM"/> <time datetime="11:30">11:30 <abbr lang="la" title="ante meridiem">AM</abbr></time> &#x2013; <time datetime="12:30">12:30 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="12:00 PM"/> <time datetime="12:00">12:00 <abbr lang="la" title="post meridiem">PM</abbr></time> &#x2013; <time datetime="13:00">01:00 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="12:30 PM"/> <time datetime="12:30">12:30 <abbr lang="la" title="post meridiem">PM</abbr></time> &#x2013; <time datetime="13:30">01:30 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="01:00 PM"/> <time datetime="13:00">01:00 <abbr lang="la" title="post meridiem">PM</abbr></time> &#x2013; <time datetime="14:00">02:00 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="01:30 PM"/> <time datetime="13:30">01:30 <abbr lang="la" title="post meridiem">PM</abbr></time> &#x2013; <time datetime="14:30">02:30 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="02:00 PM" checked="checked"/> <time datetime="14:00">02:00 <abbr lang="la" title="post meridiem">PM</abbr></time> &#x2013; <time datetime="15:00">03:00 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="02:30 PM"/> <time datetime="14:30">02:30 <abbr lang="la" title="post meridiem">PM</abbr></time> &#x2013; <time datetime="15:30">03:00 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="03:00 PM"/> <time datetime="15:00">03:00 <abbr lang="la" title="post meridiem">PM</abbr></time> &#x2013; <time datetime="15:00">04:30 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="03:30 PM"/> <time datetime="15:30">03:30 <abbr lang="la" title="post meridiem">PM</abbr></time> &#x2013; <time datetime="16:30">04:00 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="04:00 PM" checked="checked"/> <time datetime="16:00">04:00 <abbr lang="la" title="post meridiem">PM</abbr></time> &#x2013; <time datetime="16:00">05:00 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="04:30 PM"/> <time datetime="16:00">04:00 <abbr lang="la" title="post meridiem">PM</abbr></time> &#x2013; <time datetime="16:30">05:30 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    						<li><label><input name="hourSlot" type="checkbox" value="05:00 PM"/> <time datetime="16:30">05:00 <abbr lang="la" title="post meridiem">PM</abbr></time> &#x2013; <time datetime="17:00">06:00 <abbr lang="la" title="post meridiem">PM</abbr></time></label></li>
    					</ul>
    					<button id="check_all_button">Check All</button>
    					<button id="uncheck_all_button">Uncheck All</button>
    				</fieldset>
    			</form>
    		</section>
    	</body>
    </html>
    You did a fantastic job but you changed my HTML. I can't change the HTML. I have to find a soultion with the HTML already written before. This is my HTML
    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>
    :

  10. #25
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by asifakhtar View Post
    You did a fantastic job but you changed my HTML. I can't change the HTML. I have to find a soultion with the HTML already written before.
    That doesn't seem exactly true given that you changed your HTML from post #1. I rewrote it because that HTML isn't properly written.

    Still, just paste the following slightly modified JavaScript below Old Pedant's script and that should do it. (I removed the parts that were redundant with Old Pedant's code):

    Code:
    var state = { checked: true, unchecked: false };
    function check_or_uncheck_all(event, checkboxes, new_state) {
    	event.preventDefault();
    	for (var i = 0; i < checkboxes.length; i += 1) {
    		checkboxes[i].checked = state.unchecked;
    		if (new_state === state.checked && /:00/.test(checkboxes[i].value)) {
    			checkboxes[i].checked = state.checked;
    		}
    	}
    }
    function initialize_script() {
    	var checkboxes = document.getElementById("myForm").querySelectorAll("[name='hourSlot']:enabled");
    	var check_all_button = document.createElement("button");
    	var uncheck_all_button = document.createElement("button");
    	check_all_button.addEventListener("click", function (event) { check_or_uncheck_all(event, checkboxes, state.checked); });
    	uncheck_all_button.addEventListener("click", function (event) { check_or_uncheck_all(event, checkboxes, state.unchecked); });
    	check_all_button.appendChild(document.createTextNode("Check All"));
    	uncheck_all_button.appendChild(document.createTextNode("Uncheck All"));
    	document.getElementById("myForm").appendChild(check_all_button);
    	document.getElementById("myForm").appendChild(uncheck_all_button);
    }
    document.addEventListener("DOMContentLoaded", initialize_script);
    For every complex problem, there is an answer that is clear, simple, and wrong.

  11. #26
    Regular Coder
    Join Date
    Feb 2009
    Posts
    121
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    That doesn't seem exactly true given that you changed your HTML from post #1. I rewrote it because that HTML isn't properly written.

    Still, just paste the following slightly modified JavaScript below Old Pedant's script and that should do it. (I removed the parts that were redundant with Old Pedant's code):

    Code:
    var state = { checked: true, unchecked: false };
    function check_or_uncheck_all(event, checkboxes, new_state) {
    	event.preventDefault();
    	for (var i = 0; i < checkboxes.length; i += 1) {
    		checkboxes[i].checked = state.unchecked;
    		if (new_state === state.checked && /:00/.test(checkboxes[i].value)) {
    			checkboxes[i].checked = state.checked;
    		}
    	}
    }
    function initialize_script() {
    	var checkboxes = document.getElementById("myForm").querySelectorAll("[name='hourSlot']:enabled");
    	var check_all_button = document.createElement("button");
    	var uncheck_all_button = document.createElement("button");
    	check_all_button.addEventListener("click", function (event) { check_or_uncheck_all(event, checkboxes, state.checked); });
    	uncheck_all_button.addEventListener("click", function (event) { check_or_uncheck_all(event, checkboxes, state.unchecked); });
    	check_all_button.appendChild(document.createTextNode("Check All"));
    	uncheck_all_button.appendChild(document.createTextNode("Uncheck All"));
    	document.getElementById("myForm").appendChild(check_all_button);
    	document.getElementById("myForm").appendChild(uncheck_all_button);
    }
    document.addEventListener("DOMContentLoaded", initialize_script);
    I appreicate your effort but I extended Old Pedant's solution and I want opinion from everyone here whether this is the right approach or not.
    Code:
    function SelectAppropriateCheckBox()
    		{
    			try 
    			{
    				for(var i = 0; i < gAvailableTimesCheckboxesArray.length; ++i)
    				{
    					var CurrentCheckboxes = gAvailableTimesCheckboxesArray[i];
    					if (CurrentCheckboxes == this)
    					{ 
    						if(i > 0) 
    						{
    							if(i < gAvailableTimesCheckboxesArray.length-1) 
    							{							
    								if(gAvailableTimesCheckboxesArray[i-1].disabled || gAvailableTimesCheckboxesArray[i+1].disabled)
    								{
    									gAvailableTimesCheckboxesArray[i].checked = false;
    								}
    								else
    									gAvailableTimesCheckboxesArray[i-1].checked = false;	
    							}	
    							else
    							{
    								if(gAvailableTimesCheckboxesArray[i-1].disabled)
    								{
    									gAvailableTimesCheckboxesArray[i].checked = false;
    								}
    								else
    									gAvailableTimesCheckboxesArray[i-1].checked = false;	
    							}										
    						}						
    							
    						if(i < gAvailableTimesCheckboxesArray.length-1) 
    						{
    							if(i > 0)
    							{
    								if(gAvailableTimesCheckboxesArray[i-1].disabled || gAvailableTimesCheckboxesArray[i+1].disabled)
    								{
    									gAvailableTimesCheckboxesArray[i].checked = false;
    								}
    								else
    									gAvailableTimesCheckboxesArray[i+1].checked = false;
    							}
    							else
    							{
    								if(gAvailableTimesCheckboxesArray[i+1].disabled)
    								{
    									gAvailableTimesCheckboxesArray[i].checked = false;
    								}
    								else
    									gAvailableTimesCheckboxesArray[i+1].checked = false;
    							}
    							
    						}						
    							
    						break; // added this:  no point in continuing the loop
    					}
    				}
    			}
    			catch (err) 
    			{
    				alert(err.name + ': ' + err.message); alert('SelectAppropriateCheckBox()');
    			} 
    		}

  12. #27
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,195
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Maybe I don't understand the question. Maybe I'm being naive.

    But *IF* I read you correctly, isn't it as simple as this?
    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" checked disabled>08:00 AM - 9:00 AM 
                </td>
                <td class="AvailableTimes">
                    <input name="hourSlot" type="checkbox" value="08:30 AM" disabled>08:30 AM - 09:30 AM 
                </td>
                <td class="AvailableTimes">
                    <input name="hourSlot" type="checkbox" value="09:00 AM" checked disabled>09:00 AM - 10:00 AM 
                </td>
                <td class="AvailableTimes">
                    <input name="hourSlot" type="checkbox" value="09:30 AM" disabled>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>
    <label><input type="checkbox" name="checkAll"/> Check all</label>
    
    </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
            }
        }
    }
    form.checkAll.onclick = function( )
    {
        for ( var s = 0; s < slots.length; ++s )
        {
            var slot = slots[s];
            if ( ! slot.disabled ) slot.checked = this.checked;
        }
    }
        
    </script>
    </body>
    </html>
    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. #28
    Regular Coder
    Join Date
    Feb 2009
    Posts
    121
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Maybe I don't understand the question. Maybe I'm being naive.

    But *IF* I read you correctly, isn't it as simple as this?
    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" checked disabled>08:00 AM - 9:00 AM 
                </td>
                <td class="AvailableTimes">
                    <input name="hourSlot" type="checkbox" value="08:30 AM" disabled>08:30 AM - 09:30 AM 
                </td>
                <td class="AvailableTimes">
                    <input name="hourSlot" type="checkbox" value="09:00 AM" checked disabled>09:00 AM - 10:00 AM 
                </td>
                <td class="AvailableTimes">
                    <input name="hourSlot" type="checkbox" value="09:30 AM" disabled>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>
    <label><input type="checkbox" name="checkAll"/> Check all</label>
    
    </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
            }
        }
    }
    form.checkAll.onclick = function( )
    {
        for ( var s = 0; s < slots.length; ++s )
        {
            var slot = slots[s];
            if ( ! slot.disabled ) slot.checked = this.checked;
        }
    }
        
    </script>
    </body>
    </html>
    I think you didn't get my question right here. The HTML in this case will be (For example if a user checked “08:00 AM - 09:00 AM” and “09:00 AM - 10:00 AM “ and “10:00 AM - 11:00 AM” and “02:00 PM - 03:00 PM” and “04:00 PM - 05:00 PM” when he was creating a slot then when he opens the same one then I checked and disabled “08:00 AM - 09:00 AM” and “10:00 AM - 11:00 AM” and checked only(Not Disabled) “09:00 AM - 10:00 AM “and “02:00 PM - 03:00 PM” and “04:00 PM - 05:00 PM” and I want to give him an option to check/uncheck.

    Please make sure that “08:00 AM - 09:00 AM” and “10:00 AM - 11:00 AM” shouldn’t be unchecked at all because these have been booked.) :

    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" checked disabled>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" checked>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" checked disabled>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" checked>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" checked>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>
    <label><input type="checkbox" name="checkAll"/> Check all</label>
    
    </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
            }
        }
    }
    form.checkAll.onclick = function( )
    {
        for ( var s = 0; s < slots.length; ++s )
        {
            var slot = slots[s];
            if ( ! slot.disabled ) slot.checked = this.checked;
        }
    }
        
    </script>
    </body>
    </html>

  14. #29
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,195
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    How am I supposed to distinguish between slots that are PREVIOUSLY checked (but not disabled) and ones that the user has checked since the page was opened?

    Using your last code there, say the user brings up the page, then checks the 1PM-2PM box.

    How can my "check all" code tell that the 1PM-2PM box was not checked when the page was first opened?

    I mean, it *can* be done, though it's a pain in the neck. But *should* it be done????

    Oh, and what happens if the page indeed appears with 9AM-10AM checked, as you have it, and the user then MANUALLY UNCHECKS that slot??? Does the REMOVE it from your "protected" list of not?

    You need to be more explicit about *ALL* possible operations.
    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.

  15. #30
    Regular Coder
    Join Date
    Feb 2009
    Posts
    121
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    How am I supposed to distinguish between slots that are PREVIOUSLY checked (but not disabled) and ones that the user has checked since the page was opened?

    Using your last code there, say the user brings up the page, then checks the 1PM-2PM box.

    How can my "check all" code tell that the 1PM-2PM box was not checked when the page was first opened?

    I mean, it *can* be done, though it's a pain in the neck. But *should* it be done????

    Oh, and what happens if the page indeed appears with 9AM-10AM checked, as you have it, and the user then MANUALLY UNCHECKS that slot??? Does the REMOVE it from your "protected" list of not?

    You need to be more explicit about *ALL* possible operations.
    First of all I don’t need “checkAll” at all.

    Second of all if a slot is checked and disabled then a user shouldn’t be able to make changes to it (because it is booked now i-e in the current case “08:00 AM - 9:00 AM” or “10:00 AM - 11:00 AM”) but a user can still play with the other open slots(i-e check/uncheck other slots).


 
Page 2 of 3 FirstFirst 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
  •