JSFiddle - React, Tailwind, and code Playground

HTML

<div><input type="checkbox" value="1" name="trustee" class="trustee" checked="checked" /></div>
<div><input type="checkbox" value="1" name="trustee" class="trustee" checked /></div>
<div><input type="checkbox" value="1" name="trustee" class="trustee" /></div>
<hr />
<div><input type="checkbox" value="1" name="trustee" class="wtf" checked="checked" /></div>
<div><input type="checkbox" value="1" name="trustee" class="wtf" checked /></div>
<div><input type="checkbox" value="1" name="trustee" class="wtf" /></div>

JavaScript

$('div').off('click','.trustee').on('click', '.trustee', function(e) {
    e.preventDefault();
    if($(this).prop('checked') == true) {
        alert('I am true');
        $(this).prop('checked', false);
        //$(this).attr('checked', false);
    }
    else {
        alert('I am false');
        $(this).prop('checked', true);
        //$(this).attr('checked', true);
    }
});

$('div').off('change','.wtf').on('change', '.wtf', function(e) {
    //e.preventDefault();
    //return false;
    if($(this).prop('checked') == true) {
        alert('I am true now, but I must stay false');
        $(this).prop('checked', false);
    }
    else {
        alert('I am false now, but I must stay true');
        $(this).prop('checked', true);
    }
});