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

Question

我有一个复选框列表，我试图通过在选中 2 个后禁用所有未选中的复选框来限制最多 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!");
    });

Answer 1

(来 self 在 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 ，并监听点击事件。这些事件将从它的后代中冒出来，所以应该没问题。