enable disable radio buttons based on checkbox status.
Results 1 to 5 of 5

Thread: enable disable radio buttons based on checkbox status.

  1. #1
    Junior Member alisun's Avatar
    Join Date
    Jul 2012
    Posts
    5

    enable disable radio buttons based on checkbox status.

    I thought this is something that would be more common, but based on the searching I did, it's not common at all.

    I'm helping a friend put together a form for her healthcare related website. I'm trying to make it so a client could check off options with a check-box such as medication they are using and then if they check an option they would then answer "radio" questions associated with that option such as dosage. The way I have it now, they could say that they do not use a certain medication, but if they inadvertently click a radio button for dosage it will still get sent to the form.

    I have thought of a way to reorganize the form so that I won't have to do it this way, but it would flow better if it did.

    I thought there would be a straight forward "well worn" code statement for this, but I'm not finding it. Any help would be appreciated, but if it is terribly complicated I won't be able to use it. Thanks.

  2. #2
    Senior Member
    Join Date
    Jul 2007
    Posts
    3,641
    Use jquery since it makes DOM manipulations easier.

    I'd probably stick each radio group in a fieldset element and place that fieldset element next to the checkbox controlling that group. Then I'd give the fieldset an id ("meda", "med_b" or whatever) and put the id of each fieldset in the value attribute of their corresponding checkboxes.

    When the checkbox is clicked, see if checked attribute is true or false. Use its value attribute to get the fieldset with the same id attribute value. When not checked, disable fieldset (possible since HTML 5). When checked, enable the fieldset again. You may also want to set the fieldset's css color value to #888 or something like that since only the radio buttons themselves change styling when fieldset is disabled. Making the text gray makes it much more clear that the group is disabled.

  3. #3
    Junior Member alisun's Avatar
    Join Date
    Jul 2012
    Posts
    5
    Thank you for responding johanafm.

    What you describe sounds perfect. I'm not familiar with jquery, but I found this "Hide and Show" effect.
    It's not the same as what you said, obviously, but it's as close as I could get.
    Unfortunately, even if I settled for it, it doesn't do what I need it to.
    The first two buttons hide and show everything and the second two buttons don't work.
    I realize this is largely a syntax issue, but I don't know what the syntax should be.

    I would rather use the method you mentioned if you could give me some more hints.

    PHP Code:
    <!DOCTYPE html>
    <
    html>
    <
    head>
    <
    script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $("#hide").click(function(){
        $("fieldset").hide();
      });
      $("#show").click(function(){
        $("fieldset").show();
      });
    });
    </script>
    </head>
    <body> 
    <form><input type="checkbox" name="med" value="med_a">Medication A</form>
        <button id="hide">Hide</button>
        <button id="show">Show</button>
    <form>
    <fieldset id="med_a">
        <input type="radio" name="rx1" value="yes">Dosage X<input type="radio" name="rx1" value="no">Dosage Y
    </fieldset>
    </form>

    <form><input type="checkbox" name="med" value="med_b">Medication B</form>
        <button id="hide">Hide</button>
        <button id="show">Show</button>
    <form>
    <fieldset id="med_b">
        <input type="radio" name="rx2" value="yes">Dosage X<input type="radio" name="rx2" value="no">Dosage Y
    </fieldset>
    </form>
    </body>
    </html> 

  4. #4
    Senior Member
    Join Date
    Jul 2007
    Posts
    3,641
    First off, please note that any javascript restrictions to forms cannot be trusted. The user can always forge their own requests. Thus, always validate using PHP as well.

    HTML Code:
    <fieldset>
    	<legend>Meds</legend>
    	<input class="toggleFieldset" type="checkbox" value="medicationA" checked>
    	<fieldset id="medicationA">
    		<legend>Medication Group A</legend>
    		<div>
    			<input type="radio" name="medA[]">Never
    		</div>
    		<div>
    			<input type="radio" name="medA[]">Sometimes
    		</div>
    		<div>
    			<input type="radio" name="medA[]">Always
    		</div>
    	</fieldset>
    	<input class="toggleFieldset" type="checkbox" value="medicationB" checked>
    	<fieldset id="medicationB">
    		<legend>Medication Group B</legend>
    		<div>
    			<input type="radio" name="medB[]">Never
    		</div>
    		<div>
    			<input type="radio" name="medB[]">Sometimes
    		</div>
    		<div>
    			<input type="radio" name="medB[]">Always
    		</div>
    	</fieldset>
    </fieldset>
    Handle checkbox clicks
    Code:
    <script>
    /* Dynamically add onchange event handler to all inputs with class toggleFieldset,
    	instead of setting onchange="..." for each one separately.
    
    	Code runs when you click one of the checkboxes. */
    $('input.toggleFieldset').bind('change', function(e) {
    	/* The e function parameter is the event handler */
    	if (e.target.checked) {
    		var el = $('#'+ e.target.value);
    		el.prop('disabled', false);
    		el.css('color', '#000');
    	}
    	else {
    		var el = $('#'+ e.target.value);
    		el.prop('disabled', true);
    		el.css('color', '#888');
    	}
    });
    Handle page reload after someone unchecks a checkbox
    Code:
    /* If someone unchecks a checkbox, then reload the page, without javascript you'd
    	have a state with unchecked checkbox but enabled fieldset, which needs to be fixed.
    	This is one way of doing it. Another would be to simple make sure the checkboxes are
    	always checked. */
    $('input.toggleFieldset').each(
    	function() {
    	// $(this) will be each of the toggleFieldset inputs as jQuery iterates over them
    	var tf = $(this).prop('checked');
    	// The difference between attr and prop is that attr holds the element's attribute value from page load
    	// while prop holds the current value. When box is unchecked, we need attr('value')
    	var el = $('#'+$(this).attr('value'))
    	var c = tf ? '#000' : '#888';
    	el.prop('disabled', !tf).css('color', c);
    
    	// If you're a fan of one liners, you can reduce the above to
    	/*
    		$('#'+$(this).attr('value')).prop('disabled', !$(this).prop('checked')).css('color', ($(this).prop('checked') ? '#000' : '#888'));
    	*/
    })
    
    
    </script>

  5. #5
    Junior Member alisun's Avatar
    Join Date
    Jul 2012
    Posts
    5
    Thank you very much johanafm

    This looks like it will work. I need to look it over for my own benefit, but I tried it out and it looks like it does what I need it to.

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
  •