Here is a checkbox overlay method you may want to consider.
.CheckBoxOverlay{
position:relative;
display:inline;
}
.CheckBoxOverlay div{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
cursor: pointer;
}
function showAlert(EleOverlay,CBIdent) {
var oCB=document.getElementById(CBIdent);
if (oCB.disabled) {
alert("CheckBox is Disabled");
}
else{
EleOverlay.style.display="none";
oCB.checked=!oCB.checked;
}
};
<div class="CheckBoxOverlay">
<input id="AAA" type="checkbox" disabled="disabled" />
<div onclick="showAlert(this,'AAA')"></div>
</div>
<div class="CheckBoxOverlay">
<input id="BBB" type="checkbox" disabled="disabled" checked="checked" />
<div onclick="showAlert(this,'BBB')"></div>
</div>
<div class="CheckBoxOverlay">
<input id="CCC" type="checkbox"/>
<div onclick="showAlert(this,'CCC')"></div>
</div>
<div class="CheckBoxOverlay">
<input id="DDD" type="checkbox" checked="checked"/>
<div onclick="showAlert(this,'DDD')"></div>
</div>
fiddle at:
http://jsfiddle.net/dz2gdu30/[
^]
fiddles to add wrapper and overlay elements:
http://jsfiddle.net/dz2gdu30/1/[
^]
http://jsfiddle.net/dz2gdu30/2/[
^]
modified from:
http://jsfiddle.net/RXqAm/170/[
^]
http://stackoverflow.com/questions/3100319/event-on-a-disabled-input[
^]
and Solution 1