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时，一个监听器被附加到proceedButton，后者显示警报，然后阻止提交（通过事件的preventDefault（）方法）。取消选中时，将删除该侦听器，并且该按钮的行为正常。

这一行为符合observer/event design pattern的原则：有时你想要完全禁用事件调度，这就是“禁用”属性所反映的，但有时你只想捕获一个事件并阻止它发生做任何通常做的事情，这就是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。一些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

您是否尝试在按钮上使用委派的单击事件处理程序？像这样：

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

按钮被禁用时，JQuery注册单击事件

4 个答案: