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

stuff =
{
    rightClickFunc: function (e) 
    {
        var obj;
        if ($.browser.msie) obj = event.srcElement;
        else obj = e.target;
        stuff.disableEnableObject(obj);
        return false;
    },
    
    disableEnableObject: function (o)
    {
        if (o.getAttribute("disabled") == null)                
              $('#'+o.id).attr("disabled", "disabled");
        else  $('#'+o.id).removeAttr("disabled");
    },
    
    detectorClickFunc: function (e) {
        if ($(e.target).hasClass("disabled-detector")) {
            console.log("ahh");            
        }
    }
}

document.oncontextmenu = stuff.rightClickFunc;

document.onclick = stuff.detectorClickFunc;