JSFiddle - React, Tailwind, and code Playground
HTML
<input type="radio" name="gender" value="m" /><label>Male</label>
<input type="radio" name="gender" value="f" /><label>Female</label>
<br />
<select id="mOptions" disabled="true">
<option>Select</option>
<option value="1">Shirt</option>
<option value="2">Pant</option>
<option value="3">dhoti</option>
</select>
<select id="fOptions" disabled="true">
<option>Select</option>
<option value="4">Saree</option>
<option value="5">Bangle</option>
<option value="6">handbag</option>
</select>
JavaScript
$(document).ready(function() {
$('input[name="gender"]').click(function() {
if ($('input[name="gender"]').is(':checked')) {
var radioValue = $("input[name='gender']:checked").val();
if (radioValue == "m") {
$( "#mOptions" ).css('color', '#0f0');
$( "#fOptions" ).css('color', '#fff');
$( "#mOptions" ).prop( "disabled", false );
$( "#fOptions" ).prop( "disabled", true );
} else {
$( "#mOptions" ).css('background-color', '#fff');
$( "#fOptions" ).css('background-color', '#0f0');
$( "#mOptions" ).prop( "disabled", true );
$( "#fOptions" ).prop( "disabled", false );
}
}
});
});