JSFiddle - React, Tailwind, and code Playground

by drewP

HTML

<input type="checkbox" class="archived" id="archive" name="priorityGroup"/>
<div>
<div id="preset_date_label">
                                <label>
                                    Get All Events By: </label></div>
                            <div id="preset_date_radioGroup">
                                <div>
                                     <input type="radio" class="preset_date" name="priorityGroup" value=""/>Off
                                     <input type="radio" class="preset_date" name="priorityGroup" value="3" checked="checked"/>3 Months
                                     <input type="radio" class="preset_date" name="priorityGroup" value="6"/>6 Months
                                     <input type="radio" class="preset_date" name="priorityGroup" value="12"/>12 Months
                                </div>
                            </div>
                        </div>
                        <div class="subgroup2" id="subgroup2d">
                            <div>
                                <label for="tbStart" id="lblStart">
                                    Start Time</label>
                                <input id="tbStart" class="date required" type="text" />
                            </div> <br /><br />
                            <div id="div_tb_End">
                                <label for="tbEnd" id="lblEnd">
                                    End Time
                                </label>
                                <input id="tbEnd" class="date required" type="text" />
                            </div>
                        </div>

CSS

#preset_date_label, #preset_date_radioGroup
    {
        display: none;
    }

JavaScript

$(function() {

$("#archive").change(function () {
    console.log('here');
    if($(this).is(":checked")) {
            $("#preset_date_label, #preset_date_radioGroup").show();
            $(".subgroup2").find("input").val('').attr('disabled', true);
    }
    else {
            $("#preset_date_label, #preset_date_radioGroup").hide();
            $(".subgroup2").find("input").val('').attr('disabled', false);
    }  
});
    
    $(".preset_date").change(function () {
        if($(this).val() === '') {
            $(".subgroup2").find("input").attr('disabled', false);
        }
        else {
            $(".subgroup2").find("input").val('').attr('disabled', true);
        }
    });
    
});