当按钮被禁用时，如何注册JQuery点击事件

Question

我有一个禁用的输入按钮，当选中复选框时，它将变为可用状态。 现在，我想让按钮在被点击但处于禁用状态时显示警告，以通知用户需要先选中复选框。

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

当我点击按钮时，因为它被禁用了，所以什么都不会发生。

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

- wvp

---

当一个输入被禁用时，与之相关的任何事件也会被禁用。 - Aaron

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选择器。

- James Allardice

---

尽管在jQuery选择器中使用nodename可能会使JavaScript更易理解和更易读。 - Justus Romijn

我批准这个解决方案。当复选框未被选中时，您当然可以在输入项上添加一个透明的<div>元素，并捕获该事件，但是一旦您开始这样做，就会变得很棘手。 - Justus Romijn

@JustusRomijn - 我同意，使用标签名称可以使其更清晰。实际上两种方式都没有区别，但是不使用标签名称可能会稍微快一点，因为可以使用本机的 getElementById。我也同意在输入上方放置一个透明元素可能并不是一个好主意。 - James Allardice

Answer 2

如果您希望一个按钮能够触发点击事件，那么它不能被禁用（即，不能有属性'disabled'）。

如果您想让按钮在acceptCheckbox被点击时“看起来”被禁用，那么您需要采取不同的方法。也就是说，您需要使得当acceptCheckbox被选中时，监听器被添加到proceedButton上，该监听器会显示警报并通过事件的preventDefault()方法阻止提交。当它未被选中时，该监听器将被移除，按钮则正常工作。

这种做法符合观察者/事件设计模式的原则：有时您想完全禁用事件分发，这就是'disabled'属性所反映的内容，但有时您只想捕获事件并防止其执行通常的操作，这就是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。

我知道这是一个旧帖子，但今天早上我发现自己也面临着这个问题，并认为这可能有助于未来的读者。

- Adam Easterling

---

您可以自由回答任何问题，无论它有多久历史，特别是像这样没有被采纳答案的问题。每个问题都有它的访问者，这可能对未来的某个人有所帮助。 - Joshua Dwire

一个快速的CSS技巧“禁用”的方法是将opacity:0.3设置为初始值，然后再将其删除（或将其恢复为1）以“重新启用”。 - billrichards

Answer 3

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

- thecodeparadox

---

不起作用，禁用的按钮无法接收点击事件。 - James Allardice

Answer 4

你尝试过在按钮上使用委托点击事件处理程序吗？类似这样的代码：

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

- R.S