JSFiddle - React, Tailwind, and code Playground

by nobuts

HTML

<table border="1" cellpadding="5" cellspacing="10">
    <tr>
        <td>Category</td>
        <td>
            <label>
                <input name="cate" type="radio" value="1" />cate1</label>
            <label>
                <input name="cate" type="radio" value="2" />cate2</label>
        </td>
    </tr>
    <tr>
        <td>values</td>
        <td>
            <label>
                <input type="radio" name="scate1" value="1" disabled/>sub cate1-1</label>
            <br />
            <label>
                <input type="radio" name="scate1" value="2" disabled />sub cate1-2</label>
            <br />
            <label>
                <input type="radio" name="scate1" value="3" disabled />sub cate1-3</label>
            <hr />
            <label>
                <input type="radio" name="scate2" value="1" disabled />sub cate2-1</label>
            <br />
            <label>
                <input type="radio" name="scate2" value="2" disabled />sub cate2-2</label>
            <br />
            <label>
                <input type="radio" name="scate2" value="3" disabled />sub cate2-3</label>
        </td>
    </tr>
</table>

JavaScript

$('document').ready(function () {
    $('input[name="cate"]').change(function () {
        if ($(this).val() == '1') {
            $('input[name="scate1"]').removeAttr('disabled');
            $('input[name="scate2"]').attr('disabled', 'disabled');
        } else {
            $('input[name="scate2"]').removeAttr('disabled');
            $('input[name="scate1"]').attr('disabled', 'disabled');
        }
    });
});