JSFiddle - React, Tailwind, and code Playground

by VixedS

HTML

<form action="pfile.php" method="post" id="findsimilar">
    <table>
    <tr>
        <td>
            <input type="checkbox" name="color" value="red">
            <input type="checkbox" name="darkness" value="8">
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="color" value="blue">
            <input type="checkbox" name="darkness" value="2">
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="color" value="green">
            <input type="checkbox" name="darkness" value="5">
        </td>
    </tr>
    </table>
    <input type="submit" name="submit_b">
</form>

JavaScript

var chkDarkness= $('#findsimilar input[name="darkness"]');
    var chkColors=$('#findsimilar input[name="color"]');

    chkDarkness.prop('disabled','disabled');

    chkColors.on('click',function(){
        var el=$(this);
        chkDarkness.prop({'disabled':'disabled','checked':false});
        if (el.is(':checked')){
            chkColors.not(el).prop('checked',false);
            el.parent().find('input[name="darkness"]').removeProp('disabled');
        }
    })