JSFiddle - React, Tailwind, and code Playground

HTML

<div id=”WebContent”>  
    <table style="width:100%;">  
        <tr>  
            <td width="10%"><label>代號</label></td>  
            <td><input class="group1" id="Id_TEXT" type="text" /></td>  
        </tr>  
        <tr>  
            <td><label>名稱</label></td>  
            <td><input class="group1" id="Name_TEXT" type="text" /></td>  
        </tr>  
        <tr>  
            <td><label>啟用/停用</label></td>  
            <td>  
                <input class="group1" type="radio" name="Availa" id="Enable_RADIO" value="Enable" />  
                <label for="radio">啟用</label>  
                                
                <input class="group1" type="radio" name="Availa" id="Disable_RADIO" value="Disable" />  
                <label for="radio">停用</label>  
             </td>  
         </tr>  
         <tr>  
             <td><label>備註</label></td>  
             <td>  
                 <textarea class="group1" name="textarea" id="Memo_TEXTAREA" cols="45" rows="5"></textarea>  
             </td>  
         </tr>  
     </table>  
</div>
<button class="group1" type="button" id="disableBtn">disable all</button>
<button type="button" id="disableOtherBtn">disable all but me</button>
<div id="resetAll">click this text to enable all</div>

JavaScript

$("#disableBtn").click(function(){
    $(":input").prop("disabled", true);
});

$("#disableOtherBtn").click(function(){
    $(".group1").prop("disabled", true);
});

$("#resetAll").click(function(){
    $(":input").prop("disabled", false);
});