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("<div class='needConsentButtonOutterDiv' style='display: inline-block; position:relative'></div>");
    }
    $('.needConsentButton').after('<div class="needConsentButtonDiv" style="position:absolute; top:0; left:0; width: 100%; height:100%; ;"></div></div>');

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click consent checkbox before approve! <input type="checkbox" id="consent-confirm-checkbox">
<br/>
<br/>

<button class="needConsentButton" id="approveButton">Approve Form1!</button>

<br/>
<br/>
<button class="needConsentButton" id="approve2Button">Approve Form2!</button>

Good things about this approach:

• Only need to add a class for the button to be disabled, the other HTML remain the same
• Can consent multiple button at once
• The button is actually disabled instead of using fancy customized method, that make external library understand and make CSS accordingly

Answer 2

You could put a div around the submit button and attach a click function to that for when the submit button is disabled:

<div id="sub-div"><input type="submit"><div>

$('sub-div').click(function(event){
    if (attr('submit-button', 'disabled') == 'true')
    {
        alert('Button Disabled')
    }
});

This is just code from the top of my head, so it might not be exactly right. But you get the point.

Answer 3

Making the button readonly can help, because the click event will be fired. Though be aware of the differences in behaviour.

<input type="submit" value="Submit" readonly="readonly" />

Answer 4

You should use .disabled class to style element to look disabled and then handle it as you wish using .hasClass('.disabled') in your JS code. It sould work as long as you didn't put "pointer-events: none;" declaration in your css code for .disabled class