JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<label class="control-label bold">Full Overhead/F&amp;A Recovery</label>
<div class="control-group" id="rblFullOver">
        <input id="fullTrue" type="radio" name="overheadRecovery" value="True" />
        <label for="fullTrue">Yes   </label>
        <input id="fullFalse" type="radio" name="overheadRecovery" value="False" />
        <label for="fullFalse">No</label>
</div>

<label class="control-label bold">Cost Share</label>
<div class="control-group" id="rblCostShareGroup">
    <input id="shareTrue" type="radio" name="share" value="True" />
    <label for="shareTrue">Yes   </label>
    <input id="shareFalse" type="radio" name="share" value="False" />
    <label for="shareFalse">No</label>
</div>

JavaScript

$("#rblFullOver input").change(function () {
    if ( $(this).val() == "True" )
    {
        // Uncheck all radio buttons contained in #rblCostShareGroup
        $('input[type=radio]', '#rblCostShareGroup').prop('checked', false);
        // Enable all radio buttons contains in #rblCostShareGroup
        $('input[type=radio]', '#rblCostShareGroup').prop('disabled', false);
    }
    else
    {
        // Check the 'Yes' radio button contained in #rblCostShareGroup
        $('input[value=True]', '#rblCostShareGroup').prop('checked', true);
        // Disable all radio buttons contained in #rblCostShareGroup
        $('input[type=radio]', '#rblCostShareGroup').prop('disabled', true);
    }
});