JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<label><input type="radio" name="address" id="dadaddress" /> Dad address</label>
<label><input type="radio" name="address" id="momaddress" /> Mom address</label>
<label><input type="radio" name="address" id="bothparents" /> Both addresses</label>
<form method="post" action="/">
<fieldset id="dad_address">
<legend>Dad's Address</legend>
<label>Address line 1: <input type="text" name="dad_address_1" class="required" /></label>
<label>Address line 2: <input type="text" name="dad_address_2" /></label>
<label>State: <input type="text" name="dad_town" class="required" /></label>
<label>Zip: <input type="text" name="dad_zip" class="required" /></label>
</fieldset>
<fieldset id="mom_address">
<legend>Mom's Address</legend>
<label>Address line 1: <input type="text" name="mom_address_1" class="required" /></label>
<label>Address line 2: <input type="text" name="mom_address_2" /></label>
<label>State: <input type="text" name="mom_town" class="required" /></label>
<label>Zip: <input type="text" name="mom_zip" class="required" /></label>
</fieldset>
<button type="submit">Go</button>
</form>
CSS
fieldset {
margin: 20px 0;
padding: 5px;
}
label {
display: block;
}
.error {
color: #c00;
}
JavaScript
// toggleFields (mini) plugin to toggle element
// visiblity and disable/enable the fields within it
$.fn.toggleFields = function(condition) {
return this.each(function(i, el) {
el = $(el);
el.toggle(condition).find(':input').attr('disabled', el.is(':hidden'));
});
};
$(document).ready(function(){
var dadAddr = $('#dad_address'),
momAddr = $('#mom_address'),
dadTrigger = $('#dadaddress'),
momTrigger = $('#momaddress'),
bothTrigger = $('#bothparents');
// hide and disable fields
dadAddr.toggleFields(false);
momAddr.toggleFields(false);
bothTrigger.click(function() {
dadAddr.toggleFields(this.checked);
momAddr.toggleFields(this.checked);
});
dadTrigger.click(function() {
dadAddr.toggleFields(this.checked);
momAddr.toggleFields(false);
});
momTrigger.click(function() {
momAddr.toggleFields(this.checked);
dadAddr.toggleFields(false);
});
$('form').validate();
});