jQuery点击禁用复选框事件未触发。

Question

我有一个复选框列表，试图通过禁用选择了两个后所有未选中的复选框来限制最多只能选择2个。

这个方法很好用，但是如果用户点击被禁用的复选框时，我想向他们显示消息来告诉他们不能选择超过2个。我试图在被禁用的复选框上触发click()事件，但它实际上并不会触发。有什么想法吗？

    var totalChecked = 0;
    var checkedLimit = 1;

    jQuery(".post-to-facebook").change(function() {
        if (jQuery(this).attr("checked") == "checked") {
            if (totalChecked < checkedLimit) {
                totalChecked += 1;

                if (totalChecked == checkedLimit) {
                    jQuery(".post-to-facebook[checked!='checked']").attr("disabled", true);
                }
            } else {
                jQuery(this).attr("checked", false);

                alert("You can only post twice to Facebook at one time. This is to avoid spam complaints, we don't want to spam on your page!");
            }
        } else {
            totalChecked -= 1;

            if (totalChecked < checkedLimit) {
                jQuery(".post-to-facebook[checked!='checked']").attr("disabled", false);
            }
        }
        console.log(totalChecked);
    });

    // THIS DOES NOT FIRE
    jQuery(".post-to-facebook:disabled").click(function() {
        alert("You can only post twice to Facebook at one time. This is to avoid spam complaints, we don't want to spam on your page!");
    });

- Wasim

---

看一下这个链接：https://dev59.com/9XA75IYBdhLWcg3wy8Xr 禁用的输入元素不会触发鼠标事件。 - griffla

可能是重复问题：https://dev59.com/BFnUa4cB1Zd3GeqPa3sb - emerson.marini

谢谢，抱歉我应该做更彻底的搜索！ - Wasim

@Wasim 你最终解决了如何处理这个问题吗？如果是，请接受一个答案，或者解释正在发生什么或我们如何帮助。 - Ian

Answer 1

我在如何在Chrome和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;
}

注意即使元素被禁用，你仍然可以"点击"它。

技术上来说，你可以只使用父级的 - 给它一个特殊的class，并在其上监听click事件。事件将从其后代冒泡上来，所以应该没问题。

- Ian

Answer 2

禁用的元素完全被禁用，因此不会接收事件。

您需要使用CSS和JavaScript来模拟禁用状态。通过这种方式，您可以应用样式（包括指针或无指针），以模拟禁用状态，但仍然可以接收事件。您还可以将另一个元素覆盖在元素上，并在该元素上侦听事件。

- Grant Thomas

Answer 3

它没有触发点击事件，因为它被禁用了。您可以通过临时覆盖它与另一个元素并处理覆盖层的onclick来解决这个问题。否则，您只能使用样式将其变灰，使其看起来像是被禁用了。

- Justin Morgan

Answer 4

使复选框变为只读可以有所帮助，因为事件仍将被触发。但要注意行为差异。

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

- Dennis Golomazov