How to trigger a click event on disabled elements

You can write a function that adds listeners to the mousedown and mouseup events, and if the targets match your Node (i.e. the mousedown and following mouseup were on your element), then it invokes another function

function listenFullClick(elm, fn) {
    var last;
    document.addEventListener('mousedown', function (e) {
        last = e.target === elm;
    });
    document.addEventListener('mouseup', function (e) {
        if (e.target === elm && last) fn();
    });
};

listenFullClick(
    document.getElementById('foo'), // node to look for
    function () {alert('bar');}     // function to invoke
);

DEMO

Disabled elements doesn't trigger any mouse events at all, so that's probably a lost cause.

However, when clicking a parent element, the event.target seems to be given correctly, which means this should work :

$(document).on('click', function (e) {   
    if (e.target.id == 'subm_tc') {
        if($("#modlgn-tc").is(':checked')){
             alert('checked');
        } else {
             alert('unchecked');
        }
    }
});

FIDDLE

My solution was to put the button in a div, which is clickable. when the button is disabled, the div has the width and height of the button, so clicking the button triggers the div. when the button is enabled, the div is shrunk to 0 width 0 height, so the click event registers with the button instead of the div. This code includes some demoing code as well for a toggle button which toggles the enabled/disabled state of the button in question

fiddle: http://jsfiddle.net/6as8b/2/

HTML

Click 'Toggle" to make 'Button' enabled or disabled. click it, and see that that one event fires if it is enabled, and another if disabled.

<input type=button value='toggle' id='toggle'><BR>
<div style='position:relative'>
    <div id='clickable'></div>
    <input id=theButton type=button disabled value='Button'>
        </div>
    <div id=clicks></div>

CSS

#clickable{
position:absolute;
    width:55px;
    height:25px;
}

JS

$(document).ready(function () {
    $('#clickable').on('click',function () {
        if ($('#theButton:disabled').length>0)
        {
        $('#clicks').append('|Disabled Button Clicked|<br>');
        }
        else
        {
            //do nothing and let the button handler do it
            $('#theButton').click();
        }
    });
    $('#theButton').on('click',function() {
        $('#clicks').append('|ENABLED button clicked|<br>');
    });
        $('#toggle').on('click',function() {
       if ($('#theButton:disabled').length>0)
        {
            $('#theButton').removeAttr('disabled');
            $('#clickable').css({'width':'0px','height':'0px'});
        }
            else
            {
                $('#theButton').attr('disabled','disabled');
                $('#clickable').css({'width':'55px','height':'25px'});
            }
    });
});