JQuery register click event while button is disabled

Question

I have a disabled input button, that will get enabled when checking a checkbox. Now, what I want is that the button shows an alert when it is clicked while is disabled to inform the user that he needs to check the checkbox first.

<input type="submit" disabled="disabled" id="proceedButton">

When I click the button nothing happens because it is disabled

$("input#proceedButton").click(function() {
    if (!$("input#acceptCheckbox").is(':checked')) {
        alert("show me");
    }
});

Answer 1

You could not disable the button, and instead check whether the checkbox is checked when the button is clicked. If you return false from the event handler the default action of the button will be prevented, so it is effectively disabled, but still clickable:

$("input#proceedButton").click(function() {
    if (!$("input#acceptCheckbox").is(':checked')) {
        alert("show me");
        return false; //Prevent the default button action
    }
});

As a side note, since id values have to be unique you should be able to safely omit the input part of your selectors and just use the id selector.

Answer 2

If you want a button to dispatch click events, it must not be disabled (i.e., it must not have the attribute 'disabled').

If what you want is for the button to appear disabled while acceptCheckbox is clicked, then you need a different approach. Namely, you need to make it so when acceptCheckbox is checked, a listener is attached to proceedButton which displays the alert and then prevents submission (via the event's preventDefault() method). When it is unchecked, that listener is removed and the button behaves normally.

This course of action fits with the principles of the observer/event design pattern: Sometimes you want to disable event dispatching entirely, which is what the attribute 'disabled' reflects, but sometimes you want merely catch an event and prevent it from doing whatever it normally does, which is what preventDefault() allows you to do.

Here's some code which I believe reflects this approach, given the situation that the OP had (which has long been resolved, but still might be useful for future readers).

var disabledProceedButtonFn = function(e) {
    alert('Please check the "I accept" check box before submitting this form.');
    e.preventDefault();
}

var proceedButton = $("input#proceedButton");

var disableProceedButton = function() {
    proceedButton.addClass('disabled');
    proceedButton.on('click', disabledProceedButtonFn); // add the listener
}
var enableProceedButton = function() {
    proceedButton.removeClass('disabled');
    proceedButton.off('click', disabledProceedButtonFn); // remove the listener
}

$("input#acceptCheckbox").on('change', function() {
  if ($(this).is(':checked')) {
      enableProceedButton();
  } else {
      disableProceedButton();
  }
});

disableProceedButton(); // 'Disable' the button on page load

Note: You will need CSS that makes a button appear disabled when given the 'disabled' class. Some CSS frameworks support this out of the box, such as Twitter Bootstrap.

I know this is an old thread, but I found myself dealing with this very issue this morning, and thought this might help future readers.

Answer 3

Have you tried to use a delegated click event handler on the button instead? Something like this:

$( "body" ).on( "click", "#proceedButton", function() { 
    if (!$("input#acceptCheckbox").is(':checked')) {
        alert("show me");
    }
});

Answer 4

$("input#proceedButton").click(function() {
    if (!$(this).is(':disabled')) {
        alert("alert to notify about check the checkbox");
    } else {
        alert('show me');
    }
});