4

我有一个复选框列表，我试图通过在选择 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!");
    });
4

4 回答 4

3

（来自我在如何在 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;
}

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

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

于 2013-04-25T15:30:47.927 回答
3

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

您需要假装使用 CSS 和 JavaScript 本身禁用了某些功能。通过这种方式，您可以应用样式，包括指针（或缺少指针）来模拟禁用状态，但仍能接收事件。你也可以用另一个元素覆盖元素并监听那个东西上的事件。

于 2013-04-25T15:18:03.830 回答
0

制作复选框readonly会有所帮助，因为事件将被触发。虽然要注意行为上的差异。

<input type="checkbox" name="yourname" value="Bob" readonly="readonly" />
于 2013-11-12T10:01:51.970 回答
0

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

于 2013-04-25T15:22:51.110 回答