I'm working on a small plugin that extends a checkbox to behave as if it has 3 states. Basically it just adds an anchor above the underlying checkbox, intercepts mouse clicks, and cycles the checkbox between:
disabled + unchecked enabled + unchecked enabled + checked It works fine in FF. But in IE7, for some reason, the click events are always sent to the underlying checkbox instead of the overlaid anchor. The anchor is sized to completely overlay the checkbox (and in fact, I made it's slightly bigger so clicking at the very edges works). Incidentally, I'm using jQuery 1.2.6 since this is part of a much larger web application and we haven't yet worked out the incompatibilities we're seeing with the latest jQuery version. Here's the plugin code (the alerts are for debugging in IE; please don't beat up on me too bad - it's an early work-in-progress): (function($) { $.fn.checkbox3s = function(options) { var opts = $.extend({}, $.fn.defaults, options); return this.each(function() { var proxy, cbx = $(this), parent = cbx.parent(); parent.css({position:"relative"}); proxy = $("<a href='#'></a>").css({ position:"absolute", display:"block", padding:"0", margin:"0", textDecoration:"none", left: "0px", top: "0px", width: "100%", height: "100%" }).appendTo(parent).click(function(e) { if (cbx.is(":disabled")) { alert("disabled - enabling and unchecking"); cbx.attr({disabled: false, checked:false}); } else if (cbx.is(":checked")){ alert("enabled & checked - unchecking & disabling"); cbx.attr({checked:false, disabled:true}); } else { alert("enabled & unchecked - check"); cbx.attr({checked:true}); } return false; }); cbx.attr({checked:false, disabled:true}).css ({position:"relative"/*, zIndex:499*/}).click(function(){return false;}); }); }; $.fn.checkbox3s.defaults = {}; })(jQuery); Anyone know why this would work okay in FF but not in IE (besides the obviousness that IE sucks)? Thanks, Andy