JSFiddle - React, Tailwind, and code Playground

by neonms92

HTML

<div class="dialog 1b09e7ef-9461-4fbf-a889-8f29406fe2e3 ui-dialog-content ui-widget-content" style="width: auto; min-height: 94px; height: auto; " scrolltop="0" scrollleft="0"><div class="managerID" style="display:none">1006</div>
    
<input type="radio" name="proType" value="generic" class="proTypeSelector" />
<div class="generic">
<span>Create Generic Project:</span>
<input type="text" class="genericNameEntry">

<select class="27b33efb-6a94-444e-9a4a-c99716d7a77b">
    <option value="2">Admin</option>
    <option value="4">Committed (no PO)</option>
</select>

<button class="60e0f290-6895-42eb-9e19-a47e64ef4329"><span>Create</span></button>
</div>
<hr>
    
<input type="radio" name="proType" value="actual" class="proTypeSelector"/>
<div class="actual">
<span>Claim Existing Project:</span>
<br>

<select class="4736bb2a-0c8f-4f07-bbba-92b6ceeb29d2">
    <option value="5154C">5154C-GMI YMA Queen 3-4 Utilities</option>
    <option value="5154J">5154J-GMI YMA Queen 3-4 Hassia</option>
    <option value="5154K">5154K-GMI YMA Queen Utilities FY13</option>
</select>
<button class="adabe64b-e59e-4783-af15-a1e70b87be34"><span>Claim</span></button>

</div>
</div>

CSS

div.generic,
div.actual
{
    display:inline;
}

JavaScript

$('input').change(function() {
    var value = $('input:radio:checked').val();
    var genericDisabled = false
    var actualDisabled = false;
    if (value === 'generic') {
        actualDisabled = true;
    } else {
        genericDisabled = true;
    }
    $('div.generic :input').attr('disabled',genericDisabled);
    $('div.actual :input').attr('disabled',actualDisabled);
    alert(value);
})
    $('input:radio[value="generic"]').attr('checked', true);