JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>
            <label>Checkbox <input type="checkbox" value="test1"/></label>
            <input type="hidden" value="widget1"/>
            <label>Checkbox <input type="checkbox" value="test2"/></label>
            <label>Checkbox <input type="checkbox" value="test3"/></label>
            <input type="button" class="check" value="Check"/>
        </td>
    </tr>
    <tr>
        <td>
            <label>Checkbox <input type="checkbox" value="test1"/></label>
            <input type="hidden" value="widget2"/>
            <label>Checkbox <input type="checkbox" value="test2"/></label>
            <label>Checkbox <input type="checkbox" value="test3"/></label>
            <input type="button" class="check" value="Check"/>
        </td>
    </tr>
    <tr>
        <td>
            <label>Checkbox <input type="checkbox" value="test1"/></label>
            <input type="hidden" value="widget3"/>
            <label>Checkbox <input type="checkbox" value="test2"/></label>
            <label>Checkbox <input type="checkbox" value="test3"/></label>
            <input type="button" class="check" value="Check"/>
        </td>
    </tr>
</table>

JavaScript

$('.check').click(function(){
    var $td = $(this).parent('td');
    
    if (!confirm('This widget will be removed, ok?')) {
        $td.find(':checkbox').prop({disabled: true, checked: true});
    } else {
        $td.find(':checkbox').prop({disabled: false, checked: false});
    }
});