JSFiddle - React, Tailwind, and code Playground

HTML

<input class='user_roles' id="chk" type=checkbox></input>
<input id="btn_on" type="button" value="on" />
<input id="btn_off" type="button" value="off" />

JavaScript

function simulateClick(target) {
    var e = document.createEvent('MouseEvents');
    e.initEvent('click', true, true);
    target.dispatchEvent(e);
}


$('#chk').click(function() {
    if ($(this).prop("checked") === true) {
        alert("checked");
    }
    else {
        alert("not checked");
    }
});

$("[id$=btn_on]").bind("click", function() {
    simulateClick($('#chk')[0]);
});

$("[id$=btn_off]").click(function() {
    simulateClick($('#chk')[0]);
});