JSFiddle - React, Tailwind, and code Playground

HTML

<input id="chk" type="checkbox" disabled />
<label for="chk">Checkbox</label>

<input id="chk2" type="checkbox" disabled />
<label for="chk2">Hammer Checkbox</label>

JavaScript

// --- the bug --- //

$('#chk').prop('disabled', false);
$('#chk').trigger('click');
// fails (the checkbox is not checked)

// --- the workaround --- //

hammerDomChange = function (domChanger, tester) {
    setTimeout(
        function () {
            domChanger();
            if (!tester) hammerDomChange(domChanger, tester);
            console.log('still hammering');
        },
        10
    );
};

var chk2 = $('#chk2');
chk2.prop('disabled', false);
hammerDomChange(
    function () {
        chk2.trigger('click');
    },
    function () {
        return chk2.prop('checked');
    }
);
// succeeds (the checkbox is checked)