Question

我陷入了以下困境：

我有一个基于简单html列表的选项列表。我想让这个列表能够选择多个选项。我写了一个应该这样做的函数。现在，我的问题是如果调用了这个js函数，该函数禁用了特定数量的条目。

示例：当列表中有超过5个选项并且选择了5个选项时，其余选项将被禁用。

CSS

    <style>
        ul li{list-style:none; float:left; margin-right:20px; cursor:pointer}
        ul li p.active{text-decoration:underline}
    </style>

JS

    <script type="text/javascript">

        $(function () {
            var countLi = 5;
            //Checkboxes
            $("#chk>li>p").click(function () {
                if ($(this).hasClass("active")) {
                    countLi -= 1;
                    if ($("#chkResult").val() != "") {
                        $("#chkResult").val($("#chkResult").val().replace("," + $(this).html(), ""));
                        $("#chkResult").val($("#chkResult").val().replace($(this).html() + ",", ""));
                        $("#chkResult").val($("#chkResult").val().replace($(this).html(), ""));
                    }
                    else {
                        countLi += 1;
                    }

                    if (count == 0) {
                        $("#chk>li>p").each(function () {
                            if (!($(this).hasClass("active"))) {
                                $(this).attr("disabled", "true");
                            }
                        });
                    }
                    else {

                        $("#chk>li>p").removeAttr("disabled");
                    }
                }
                else {
                    if ($("#chkResult").val() == "") {
                        $("#chkResult").val($(this).html());
                    }
                    else {
                        $("#chkResult").val($("#chkResult").val() + "," + $(this).html());
                    }
                }

                $(this).toggleClass("active");
            });
        });

    </script>

HTML

    <ul id="chk">
            <li><p>One</p></li>
            <li><p>Two</p></li>
            <li><p>Three</p></li>
            <li><p>Four</p></li>
            <li><p>Five</p></li>
            <li><p>Six</p></li>
            <li><p>Seven</p></li>
            <li><p>Eight</p></li>
            <li><p>Nine</p></li>
            <li><p>Ten</p></li>
        </ul>
        <br />
        <input id="chkResult" type="text"  style="width:500px;"/>

Answer 1

您需要使用jquery :lt选择器，例如：

 $('#chk>li>p.active:lt(5)')

这会自动将选择器的返回集缩小到第一个n个匹配项。

JQuery函数禁用选项列表的其余部分

1 个答案: