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

Reply via email to