Accessibility - HTML5 - page 154

7.7 Enabling a fieldset Dynamically
Problem
You want to disable the fields in a fieldset and dynamically enable them when some
other condition is met, such as the user selecting a radio button or checkbox.
Solution
Add the fieldset and legend elements around a group of related form fields that will
be hidden. Note that fieldset s can be nested.
Add the disabled attribute on the two nested fieldset elements. Add an onchange event
to each radio button to trigger the change:
<form>
<fieldset>
<legend>Store Credit Card</legend>
<p><label>Name displayed on your card:<input name="fullName"
required></label></p>
<fieldset name="accountNum" disabled>
<legend>
<label>
<input type="radio" name="accountType"
onchange="form.accountNum.disabled = !checked;
form.accountLetters.disabled=checked">My account is a
12-digit number
</label>
</legend>
<p><label>Store card number: <input name="cardNum"
required></label></p>
</fieldset>
<fieldset name="accountLetters" disabled>
<legend>
<label>
<input type="radio" name="accountType"
onchange="form.accountLetters.disabled = !checked;
form.accountNum.disabled=checked">My account includes
letters and numbers
</label>
</legend>
<p><label>Store card code: <input name="cardLetters"></label></p>
</fieldset>
</fieldset>
</form>
If the radio button is not selected, everything inside the nested fieldset will be disabled.
Selecting a radio button removes the disabled attribute on that fieldset to make the
associated input field editable and adds the disabled attribute to the fieldset associ-
ated with the other radio button.