JQuery зарегистрировать событие нажатия, когда кнопка отключена

Question

У меня отключена кнопка ввода, которая будет включена при установке флажка.Теперь я хочу, чтобы кнопка показывала предупреждение, когда она нажата, когда она отключена, чтобы сообщить пользователю, что ему нужно сначала поставить галочку.

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

Когда я нажимаю кнопку, ничего не происходит, потому что онаотключено

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

Answer 1

Вы не можете отключить кнопку и вместо этого проверить, установлен ли флажок при нажатии кнопки. Если вы вернете false из обработчика событий, действие кнопки по умолчанию будет предотвращено, поэтому оно будет эффективно отключено, но по-прежнему будет активным:

$("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 был прикреплен прослушиватель, который отображает предупреждение и затем предотвращает отправку (с помощью метода warnDefault () события). Когда этот флажок снят, этот слушатель удаляется, и кнопка ведет себя нормально.

Этот порядок действий соответствует принципам шаблон проектирования наблюдателя / события : иногда вы хотите полностью отключить диспетчеризацию событий, что отражает атрибут «disabled», но иногда вы просто хотите поймать событие и не позволяет ему делать то, что он обычно делает, то, что позволяет вам делать warnDefault ().

Вот некоторый код, который, как мне кажется, отражает этот подход, учитывая ситуацию, которая возникла у ОП (которая уже давно решена, но все еще может быть полезна для будущих читателей).

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

Вместо этого вы пытались использовать делегированный обработчик события нажатия кнопки? Примерно так:

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