JSFiddle - React, Tailwind, and code Playground

by nobuts

HTML

<table>
    <tr>
        <td style="width:20px;">
            <input type="radio" id="rdoLevel" name="rdoSelect" />
        </td>
        <td>cate:</td>
        <td>
            <select ID="ddlTypeLevel" runat="server">
                <option></option>
                <option>option1</option>
                <option>option2</option>
                <option>option3</option>
                <option>option4</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <input type="radio" id="rdoBase" name="rdoSelect" />
        </td>
        <td>cate0:</td>
        <td>
            <select ID="ddlTypeBase" runat="server" ClientIDMode="Static" Enabled="False">
                <option></option>
                <option></option>
                <option>option1</option>
                <option>option2</option>
                <option>option3</option>
                <option>option4</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <input type="radio" id="rdoSchool" name="rdoSelect" />
        </td>
        <td>cate1 :</td>
        <td>
            <input type="text" ID="txtSchooNameType" runat="server" ClientIDMode="Static" Enabled="False" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="radio" id="rdoTypeRegistre" name="rdoSelect" />
        </td>
        <td>cate 2</td>
        <td>
            <select ID="ddlTypeRegister" runat="server" ClientIDMode="Static" Enabled="False">
                <option></option>
                <option></option>
                <option>option1</option>
                <option>option2</option>
                <option>option3</option>
                <option>option4</option>
            </select>
        </td>
    </tr>
    <tr>
        <td colspan="3">
            <input type="button" ID="btnSendByCategory" value="1"></input>
        </td>
    </tr>
</table>

JavaScript

// no need for these two lines in your code; the items will be 
// disabled by ASP.NET (Enabled="False")
$('select').attr('disabled', 'true');
$('input#txtSchooNameType').attr('disabled', 'true');


$("input:radio").click(function () {
    var id = $(this).attr("id");

    $('select').attr('disabled', 'true');
    $('input#txtSchooNameType').attr('disabled', 'true');

    if (id == "rdoLevel") {
        if ($(this).is(':checked')) {
            $('select#ddlTypeLevel').attr('disabled', false);
        }
    } else if (id == "rdoBase") {
        if ($(this).is(':checked')) {
            $('select#ddlTypeBase').attr('disabled', false);
        }
    } else if (id == "rdoSchool") {
        if ($(this).is(':checked')) {
            $('#txtSchooNameType').attr('disabled', false);
        }
    } else if (id == "rdoTypeRegistre") {
        if ($(this).is(':checked')) {
            $('select#ddlTypeRegister').attr('disabled', false);
        }
    }
});