enable disable radio buttons based on checkbox status.

alisun

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.

johanafm

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.

alisun

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.

<!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>

johanafm

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.

<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

<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

/* 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>

alisun

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.