JSFiddle - React, Tailwind, and code Playground
HTML
<fieldset id="cblabcb_cb_email_user_options">
d: <input type="radio" name="cb_email_user_options" value="days" id="cb_email_user_options_cbf0" />
h: <input type="radio" name="cb_email_user_options" value="hours" id="cb_email_user_options_cbf1" />
no: <input type="radio" name="cb_email_user_options" value="hours" id="cb_email_user_options_cbf2" />
</fieldset>
<div class="form-group">
<select name="emailoptions" id="em" class="form-control">
<option label="Please select" selected="selected" value="" class="noemail">Please select</option>
<optgroup label="Days" style="font-weight: bolder;">
<option label="10 days" value="10d" class="days"></option>
<option label="6 days" value="6d" class="days"></option>
<option label="3 days" value="3d" class="days"></option>
</optgroup>
<optgroup label="Hours" style="font-weight: bolder;">
<option label="24 hours" value="24h" class="hours"></option>
<option label="12 hours" value="12h" class="hours"></option>
<option label="6 hours" value="6h" class="hours"></option>
<option label="2 hours" value="2h" class="hours"></option>
</optgroup>
</select>
</div>
JavaScript
$(function (emailuseroptions) {
emailuseroptions.call($("input:radio[name='cb_email_user_options']")[0]);
$("input:radio[name='cb_email_user_options']").on("change", function () {
// $("input:radio[name='cb_email_user_options']").val();
if ($(this).is(":checked")) {
if ($(this).prop('id') === 'cb_email_user_options_cbf0') {
$("#em option[value='24h']").prop("disabled", true);
$("#em option[value='12h']").prop("disabled", true);
$("#em option[value='6h']").prop("disabled", true);
$("#em option[value='2h']").prop("disabled", true);
$("#em option[value='10d']").prop("disabled", false);
$("#em option[value='6d']").prop("disabled", false);
$("#em option[value='3d']").prop("disabled", false);
} else if ($(this).prop('id') === 'cb_email_user_options_cbf1') {
$("#em option[value='10d']").prop("disabled", false);
$("#em option[value='6d']").prop("disabled", false);
$("#em option[value='3d']").prop("disabled", false);
$("#em option[value='24h']").prop("disabled", false);
$("#em option[value='12h']").prop("disabled", false);
$("#em option[value='6h']").prop("disabled", false);
$("#em option[value='2h']").prop("disabled", false);
} else if ($(this).prop('id') === 'cb_email_user_options_cbf2') {
$("#em option[value='10d']").prop("disabled", true);
$("#em option[value='6d']").prop("disabled", true);
$("#em option[value='3d']").prop("disabled", true);
$("#em option[value='24h']").prop("disabled", true);
$("#em option[value='12h']").prop("disabled", true);
$("#em option[value='6h']").prop("disabled", true);
$("#em option[value='2h']").prop("disabled", true);
}
}
});
});