JSFiddle - React, Tailwind, and code Playground

HTML

<span>
    <input id='a' type='checkbox' disabled="disabled" />
    <span class="disabled-detector"></span>
</span>
<span>
    <input id='b' type='checkbox' />
    <span class="disabled-detector"></span>
</span>
<span>
    <input id='c' type='checkbox' />
    <span class="disabled-detector"></span>
</span>
<span>
    <input id='d' type='checkbox' />
    <span class="disabled-detector"></span>
</span>

CSS

span {
    position: relative;
}

span.disabled-detector {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
}

input+span.disabled-detector {
    display: none;
}

input[disabled]+span.disabled-detector {
    display: inline;
}

JavaScript

$(document).ready(function () {
    $(document).on("click", ".disabled-detector", function (e) {
        var chk = $(this).parent().children('input[type="checkbox"]').get(0);
        checkboxClickHandler.call(chk, e);
    }).on("click", 'input[type="checkbox"]', function (e) {
        checkboxClickHandler.call(this, e);
    });
    
    function checkboxClickHandler(evt) {
        alert(this.id);
    }
});