JQuery logs a click event when a button is disabled

Question

I have disabled the enter button, which will be activated when the checkbox is selected. Now I want the button to show a warning when it is clicked when it is disabled to tell the user that he needs to check the box 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 cannot disable a button, but instead check if the box is checked when the button is clicked. If you return falsefrom the event handler, the action of the button will be prevented by default, therefore 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
    }
});

, id , input id.

Answer 2

, , (.. "" ).

, , acceptCheckbox, . , , acceptCheckbox continueButton, , ( event preventDefault()). , , .

/: , "" , , , preventDefault().

, , , , , OP ( , ).

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

. CSS, , "disabled". CSS , , Twitter Bootstrap.

, , , , , .

Answer 3

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

Answer 4

Have you tried using the delegated click event handler on a button? Something like that:

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