JSFiddle - React, Tailwind, and code Playground
HTML
<div class='conlabel'>Have you started trading yet?</div>
<table width="100">
<tr>
<td><label>
<input type="radio" name="example" value="Yes" id="example_0" required />
Yes</label></td>
</tr>
<tr>
<td><label>
<input type="radio" name="example" value="No" id="example_1" required />
No</label></td>
</tr>
</table><br>
<li>
<div class='conlabel'>If Yes, enter trading name:</div>
<input type="text" id="field1" name="field1" placeholder="" disabled />
</li><br>
<li>
<div class='conlabel'>If No, then:</div>
<input type="text" id="field2" name="field2" placeholder="" disabled />
</li><br>
<li>
<div class='conlabel'>Enter trading start date (enabled when started trading yet = yes + trading name = notnull:</div>
<input type="text" id="field3" name="field3" placeholder="" disabled />
</li><br>
JavaScript
$(function(){
$("#example_0, #example_1").change(function(){
$("#field1, #field2").val("").attr("disabled",true);
if($("#example_0").is(":checked")){
$("#field1").removeAttr("disabled");
$("#field1").focus();
}
else if($("#example_1").is(":checked")){
$("#field2").removeAttr("disabled");
$("#field2").focus();
}
});
});