JSFiddle - React, Tailwind, and code Playground

HTML

<div class="boxed-wide-outside">
    <div class="boxed-wide">
        <div class="half">
           
            <div id="conditional-field-agent-type-function" class="conditional-field controlling-field conditional-field-processed"><div class="form-item">
 <label>Select your type of Agents: <span class="form-required" title="This field is required.">*</span></label>
 <div class="form-radios"><div class="form-item" id="edit-field-agent-type-function-value-1-wrapper">
 <label class="option" for="edit-field-agent-type-function-value-1"><input type="radio" id="edit-field-agent-type-function-value-1" name="field_agent_type_function[value]" value="1" checked="checked" class="form-radio"> Single Channel</label>
</div>
<div class="form-item" id="edit-field-agent-type-function-value-3-wrapper">
 <label class="option" for="edit-field-agent-type-function-value-3"><input type="radio" id="edit-field-agent-type-function-value-3" name="field_agent_type_function[value]" value="3" class="form-radio"> Multi Channel</label>
</div>
</div>
</div>
</div>            <div id="conditional-field-agent-type-blended" class="conditional-field controlled-field controlling-field conditional-field-processed" style="display: none; "><div class="form-item" id="edit-field-agent-type-blended-value-wrapper" style="margin-top: 12px; margin-bottom: 12px; ">

</div>
</div>            <div class="subset">
                <div id="conditional-field-agent-work-flow-enabled" class="conditional-field controlled-field" style="display: none; "><div class="form-item" id="edit-field-agent-work-flow-enabled-value-wrapper" style="margin-top: 12px; margin-bottom: 12px; ">
 <label class="option" for="edit-field-agent-work-flow-enabled-value"><input type="checkbox" name="field_agent_work_flow_enabled[value]" id="edit-field-agent-work-flow-enabled-value" value="1" class="form-checkbox"> Our Center Is Work Flow Enabled</label>
</div>
</div>
</div>            </div>
        </div>

        <div...

JavaScript

$(document).ready(function () {
    // create jQuery object containing channel <input>'s
    var $channels = $("input[id^=edit-field-channel-]");
    var single = true;
    // handler for agency <input>'s
    $("input[id^=edit-field-agent-type-function-]").change(function () {
        // update single (agency) flag
        single = ($(this).val() == 1);
        // clear all channels if just switched to single agency mode
        if (single) $channels.prop("checked", false);
    });
    // handler for channel <input>'s
    $channels.change(function () {
        var checked = $(this).prop("checked");
        // clear other checkboxes if this is singleAgency
        if (single && checked) $channels.not(this).prop("checked", false);
    });
});