Using an overlay to "fake" event handling for a disabled element (for jQuery 1.9)

Shows how to trigger an action when a user clicks on a disabled form field.

HTML

<h1>
	Using an overlay to "fake" event handling for a disabled element
</h1>

<p>
	You can read more about this technique on my blog entry
	<a href="http://blog.pengoworks.com/index.cfm/2010/4/23/Attaching-mouse-events-to-a-disabled-input-element">Attaching mouse events to a disabled input element</a>.
</p>

<h2>
	Normal Element
</h2>

<div>
	<label for="enabled">
		<input type="checkbox" id="enabled" />
		Normal Enabled Checkbox
	</label>
</div>

<h2>
	Normal Disabled Element
</h2>

<div>
	<label for="normal">
		<input type="checkbox" id="normal" disabled="disabled" />
		Normal Disabled Checkbox
	</label>
</div>

<h2>
	Using an overlay
</h2>

<div id="overlay-example">
	<label for="overlay">
		<input type="checkbox" id="overlay" disabled="disabled" />
		Disabled Checkbox w/Overlay
	</label>
</div>

JavaScript

// on DOM ready
$(document).ready(function (){
    // attach a click behavior to all checkboxes
    $(":checkbox").click(function (){
        alert("Clicked!");
    });
    
    // find the disabled elements
    var $disabled = $("#overlay-example input:disabled");
    
    // loop through each of the disable elements and create an overlay
    $disabled.each(function (){
        // get the disabled element
        var $self = $(this)
        // get it's parent label element
        , $parent = $self.closest("label")
        // create an overlay
        , $overlay = $("<div />");
        
        // style the overlay
        $overlay.css({
            // position the overlay in the same real estate as the original parent element 
            position: "absolute"
            , top: $parent.position().top
            , left: $parent.position().left
            , width: $parent.outerWidth()
            , height: $parent.outerHeight()
            , zIndex: 10000
            // IE needs a color in order for the layer to respond to mouse events
            , backgroundColor: "#fff"
            // set the opacity to 0, so the element is transparent
            , opacity: 0
        })
        // attach the click behavior
        .click(function (){
            // trigger the original event handler
            return $self.triggerHandler("click");
        });
        
        // add the overlay to the page	
        $parent.append($overlay);
    });
});