jQuery detect click on disabled submit button

Question

Fiddle: http://jsfiddle.net/ugzux/

As you can see, I have a form with a disabled (via javascript) submit button.

I want to be able to bind a click event to

Answer 1

I have a slight more complicate but similar use case to you:

1. There are many submit button on the screen, but by default they are disabled
2. User need to click on the consent checkbox for button to be enabled
3. The consent checkbox can be toggled on / off
4. After click on the checkbox, they can click on all of the submit button

Using jQuery, I have done it with Overlapping the button with a div, and wrapping the div instead another div

See the below demo

var toggleNeedConsent = function() {
  var isEnableCheckbox = $('#consent-confirm-checkbox').prop('checked');
  $('.needConsentButton').prop('disabled', !isEnableCheckbox);
  if (!isEnableCheckbox) {
    if (!$(".needConsentButtonOutterDiv").length) {
      $('.needConsentButton').wrap("
");
    }
    $('.needConsentButton').after('

'); $('.needConsentButtonDiv').click(function(e) { alert('Please accept the consent first'); }) } else { $(".needConsentButtonDiv").remove(); } } $(function() { toggleNeedConsent(); $('#consent-confirm-checkbox').click(function() { toggleNeedConsent(); }); $("#approveButton").click(function() { alert('You are a wizard, Harry!'); }) $("#approve2Button").click(function() { alert('Harry, you are a wizard!'); }) })

Click consent checkbox before approve! 





Approve Form1!





Approve Form2!