Question

我有一个复选框列表，我试图通过在选择2之后禁用所有未选中的复选框来限制为2个最大复选框。

这很好用，但是我试图向用户显示一条消息，如果他们点击一个禁用的复选框，让他们知道为什么不能选择超过2.我试图触发{{1}禁用复选框上的事件，但它实际上没有触发。有什么想法吗？

click()

Answer 1

禁用的元素不会接收事件，因为它们已被完全禁用。

您需要假装使用CSS和JavaScript本身禁用了某些内容。通过这种方式，您可以应用样式（包括指针（或缺少））来模拟禁用状态但仍然接收事件。您还可以使用其他元素覆盖元素，并在该事物上侦听事件。

Answer 2

（来自How to disable/enable a checkbox on right-click in chrome and firefox的答案）

您可以在其上方堆叠透明元素（因此用户无法看到它），相同的大小/形状，并侦听该点击事件。启用后，隐藏该堆叠元素。

以下是让您入门的内容：http://jsfiddle.net/8dYXd/4/

它使用这种结构：

<span>
    <input id='a' type='checkbox' disabled="disabled" />
    <span class="disabled-detector"></span>
</span>

这个CSS：

span {
    position: relative;
}

span.disabled-detector {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
}

input+span.disabled-detector {
    display: none;
}

input[disabled]+span.disabled-detector {
    display: inline;
}

请注意您仍然可以“点击”已禁用的元素。

从技术上讲，您可以使用父<span> - 给它一个特殊的class，并监听点击事件。事件将从其后代中冒出来，所以应该没问题。

Answer 3

它没有触发点击事件，因为它已被禁用。您可以通过暂时将其与另一个元素重叠并处理叠加层的onclick来解决此问题。否则，您必须使用样式将其灰显，以便仅看起来禁用。

Answer 4

使复选框readonly可以提供帮助，因为事件将被触发。虽然要注意differences in behaviour。

<input type="checkbox" name="yourname" value="Bob" readonly="readonly" />

禁用复选框上的jQuery单击事件未触发

4 个答案: