JSFiddle - React, Tailwind, and code Playground
HTML
<p>Parents Address *<br />
<div class="parentaddress">
<div id="parentaddress">
<div>
<input type="checkbox" value="Both parents reside at the above address" name="parentadress" id="bothparents" />
<span>Both parents reside at the above address</span>
</div>
<div>
<input type="radio" value="Father has a different address than above" name="parentadress" id="dadaddress" />
<span>Father's address is different from above</span>
</div>
<div>
<input type="radio" value="Mother has a different address than above" name="parentadress" id="momaddress" />
<span>Mother's address is different from above</span>
</div>
</div>
</div>
</p>
<div id="dad_address">... DAD ADDRESS ...</div>
<div id="mom_address">... MOM ADDRESS ...</div>
CSS
body {
margin: 10px;
}
.disabled {
color: gray;
}
JavaScript
//Cache of jQuery objects
var $$ = {
b_bothparents: $("#bothparents"),
b_dadaddress: $('#dadaddress'),
b_momaddress: $('#momaddress'),
dad_address: $("#dad_address"),
mom_address: $("#mom_address")
};
//Function which handles the moding of buttons and corresponding address blocks
function addressMode() {
if ($$.b_bothparents.is(':checked')) {
$$.b_dadaddress.add($$.b_momaddress).attr('disabled', true);
$$.b_dadaddress.next('span').add($$.b_momaddress.next('span')).addClass('disabled');
$$.dad_address.add($$.mom_address).hide();
}
else {
$$.b_dadaddress.add($$.b_momaddress).attr('disabled', false);
$$.b_dadaddress.next('span').add($$.b_momaddress.next('span')).removeClass('disabled');
var d = $$.b_dadaddress.is(':checked');
$$.dad_address[d ? 'show' : 'hide']();
$$.mom_address[d ? 'hide' : 'show']();
}
}
//Ensure b_bothparents and b_dadaddress are checked
$$.b_bothparents.attr('checked', true);
$$.b_dadaddress.attr('checked', true);
//Delegate the moding function to the .parentaddress wrapper
$(".parentaddress").on('click', 'input', addressMode);
//And ensure all other states are correct by calling addressMode().
addressMode();