JSFiddle - React, Tailwind, and code Playground
HTML
<div class="form-check form-check-inline selectEmailOptionsType">
<input class="form-check-input selectEmailOptionsTypeInput" type="radio" name="emailoptions_type" id="emailoptions_type_[user_id]_days" value="days">
<label class="form-check-label" for="emailoptions_type_[user_id]_days">Days</label>
<input class="form-check-input selectEmailOptionsTypeInput" type="radio" name="emailoptions_type" id="emailoptions_type_[user_id]_hours" value="hours">
<label class="form-check-label" for="emailoptions_type_[user_id]_hours">Hours</label>
<input class="form-check-input selectEmailOptionsTypeInput" type="radio" name="emailoptions_type" id="emailoptions_type_[user_id]_none" value="" checked>
<label class="form-check-label" for="emailoptions_type_[user_id]_none">None</label>
</div>
<div class="selectEmailOptions">
<select name="emailoptions" class="form-control selectEmailOptionsSelect">
<option value="" selected="selected">- Please Select -</option>
<option value="10d" class="selectEmailOptionDays">10 Days</option>
<option value="6d" class="selectEmailOptionDays">6 Days</option>
<option value="3d" class="selectEmailOptionDays">3 Days</option>
<option value="24h" class="selectEmailOptionHours">24 Hours</option>
<option value="12h" class="selectEmailOptionHours">12 Hours</option>
<option value="6h" class="selectEmailOptionHours">6 Hours</option>
<option value="2h" class="selectEmailOptionHours">2 Hours</option>
</select>
</div>
CSS
.hidden {
display: none;
}
JavaScript
$(function () {
$( '.selectEmailOptionsTypeInput' ).on( 'change', function() {
const select = $( this ).closest( '.selectEmailOptionsType' ).siblings( '.selectEmailOptions' );
if ( $( this ).val() === 'days' ) {
select.removeClass( 'hidden' );
select.find( 'option.selectEmailOptionDays' ).removeClass( 'hidden' ).prop( 'disabled', false );
select.find( 'option.selectEmailOptionHours' ).addClass( 'hidden' ).prop( 'disabled', true );
} else if ( $( this ).val() === 'hours' ) {
select.removeClass( 'hidden' );
select.find( 'option.selectEmailOptionHours' ).removeClass( 'hidden' ).prop( 'disabled', false );
select.find( 'option.selectEmailOptionDays' ).addClass( 'hidden' ).prop( 'disabled', true );
} else if ( $( this ).val() === '' ) {
select.addClass( 'hidden' );
}
}).trigger( 'change' );
});