JSFiddle - React, Tailwind, and code Playground

HTML

<div id="WebContent">
		<table style="width:100%;">
			<tr>
				<td width="10%">
					<label>代號</label>
				</td>
				<td>
					<input id="Id_TEXT" type="text" />
				</td>
			</tr>
			<tr>
				<td>
					<label>名稱</label>
				</td>
				<td>
					<input id="Name_TEXT" type="text" />
				</td>
			</tr>
			<tr>
				<td>
					<label>啟用/停用</label>
				</td>
				<td>
					<input type="radio" name="Availa" id="Enable_RADIO" value="Enable" />
					<label for="radio">啟用</label>

					<input type="radio" name="Availa" id="Disable_RADIO" value="Disable" />
					<label for="radio">停用</label>
				</td>
			</tr>
			<tr>
				<td>
					<label>備註</label>
				</td>
				<td>
					<textarea name="textarea" id="Memo_TEXTAREA" cols="45" rows="5"></textarea>
				</td>
			</tr>
		</table>
	</div>
	<button type="button" id="disableAllinput">關閉所有輸入欄位</button>

JavaScript

$(function(){
    $('#disableAllinput').on('click', function(){
        if(!$('#disableAllinput').data('disableAllinput') ){
            $('#WebContent table').find('td').each(function(){
                if($(this).has('input').length ){
                    $(this).find('input').prop('disabled', true);
                }else if($(this).has('textarea') ){
                    $(this).find('textarea').prop('disabled', true);
                };
            });
            $(this).data('disableAllinput', true).text('回復輸入欄位');
        }else{
            $('#WebContent table').find('td').each(function(){
                if($(this).has('input').length ){
                    $(this).find('input').prop('disabled', false);
                }else if($(this).has('textarea') ){
                    $(this).find('textarea').prop('disabled', false);
                };
            });
            $(this).data('disableAllinput', false).text('關閉所有輸入欄位');
        };
    }); // end click
});	// end ready