How to trigger a click event on disabled elements

I have a disabled button, which is enabled after checking "I accept terms and conditions" checkbox. The problem is that I wanted to trigger an alert, if a user clicks the disabled button. How can I do this? If an element is disabled, it looks as "onclick" events are not fired.

The sample of the code:

<input id="subm_tc" class="btn btn-primary" type="submit" disabled="" value="Log in" name="Submit">

    $("#subm_tc").click(function () {
        if($("#modlgn-tc").is(':checked')){
            alert('checked');
        } else {
            alert('unchecked');
        }
    });

If I wrap the element in div and listen to clicks on that div, it works, but you need to click outside the button.

How can I fix this?

Thanks

UPDATE. I've managed to resolve this by adding a fake div over the submit button and listening to events on that div (I also change z-index to -200 to enable clicks on the button itself):

<div style="position:relative">
<div id="subm_tc" style="position: absolute; left: 0px; right: 0px; bottom: 0px; top: 0px; z-index: 99999;"></div>
<input id="subm_tc" class="btn btn-primary" type="submit" disabled="" value="Log in" name="Submit">
</div>

Now it works as intended

Solution

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

$(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'
      });
    }
  });
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
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.
<br />
<input type=button value='toggle' id='toggle'>
<br /><br />
<div style='position:relative'>
  <div id='clickable'></div>
  <input id=theButton type=button disabled value='Button'>
</div>
<div id=clicks></div>