alerting the user when clicking a disabled radiobutton

Question

I have a list of radio buttons that is initially disabled, and I if the user clicks or tries to select one, he gets an alert telling him that he must be logged in to select an option.

How to do it with jquery?

Answer 1

Apparently, disabled elements don't fire mouse events: Event on a disabled input

Answer 2

This might be helpful: http://blog.pengoworks.com/index.cfm/2010/4/23/Attaching-mouse-events-to-a-disabled-input-element

I customized code from the page to be more useful in this case ( http://jsfiddle.net/jqzWK/ ):

var disabled = $('input[type="radio"]:disabled');
disabled.each(function () {
    var self = $(this),
        field = self,
        overlay = $('<div />');
    if (self.parent().is('label')) {
        field = self.parent();
    }
    overlay.css({
        position: 'absolute',
        top: field.position().top,
        left: field.position().left,
        width: field.outerWidth(),
        height: field.outerHeight(),
        zIndex: 10000,
        backgroundColor: '#ffffff',
        opacity: 0
    }).click(function () {
        alert('You must log in.');
    });
    self.parent().append(overlay);
});