How to trigger a click event on disabled elements

Question

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 cli

Answer 1

Old topic, but here are my two cents as I had the same challenge lately:

Don't try to position a clickable element above it but wrap it with one so you won’t directly be able to click it. Assuming a button with display: inline-block set:

Define you click event for the case of the button being disabled:

$('.on-disabled').click(function (ev) {
  // Don’t react to click events bubbling up
  if (ev.target !== ev.currentTarget) return;
  // Do your thing
  alert('Sorry, this button is disabled');
});

And simply style the button like:

#subm_tc {
  display: inline-block;
}

#subm_tc[disabled] {
  position: relative;
  z-index: -1;
}

This allows you to easily react to a click even in case of a disabled button. See FIDDLE.