Question

我有多个列表项，我只想这样做，用户只选择最多5个选项。不仅仅是那个。如果用户选择了5个以上的选项，则禁用defualt列表项。

JS

$(function () {

    //Checkboxes
    $("#chk>li>p").click(function () {

        if($(this).hasClass("active")) {
            if($("#chkResult").val() != "") {
                $("#chkResult").val();
            }
        } else {

            if($("#chkResult").val() == "") {
                $("#chkResult").val($(this).html());
            } else {
                $("#chkResult").val($("#chkResult").val() + "," + $(this).html());
            }
        }

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

CSS

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

HTML

<form id="test" action="">
    <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" />       
</form>

Answer 1

试试这个

$(function () {
    //Delegating the event
    $("#chk").on('click','li',function () {
        //cache the current element
        var $that = $(this);
        //check the current title if it is add one
        if($that.attr('title') === "add one"){
             //change the title if it is add one
             $that.attr('title','Remove One');
         }else {
             //change the title to add one if it is remove one
             $that.attr('title','add one');
         }


        if($that.hasClass("active")) {
            if($("#chkResult").val() != "") {
                $("#chkResult").val();
            }
        } else {
            if($("#chkResult").val() == "") {
                $("#chkResult").val($that.html());
            } else {
                $("#chkResult").val($("#chkResult").val() + "," + $that.html());
            }
        }
        $that.toggleClass("active");
    });
    //Checkboxes
});

Answer 2

使用以下

当第一次点击li时，标题更改为第二次点击时删除一个然后＆＃34;添加一个＆＃34; ，所以它继续进行偶数和奇数点击。

工作小提琴fiddle

$(function () {
    //Checkboxes
    $("#chk>li").click(function () {
        if($(this).hasClass("active")) {
            $(this).attr('title', 'Remove one');
            $(this).attr('title', 'Add one');
            if($("#chkResult").val() != "") {
                $("#chkResult").val();
            }
        } else {
            $(this).attr('title', 'Remove one');
            if($("#chkResult").val() == "") {
                $("#chkResult").val($(this).html());
            } else {
                $("#chkResult").val($("#chkResult").val() + "," + $(this).html());
            }
        }
        $(this).toggleClass("active");
    });
    //Checkboxes
});

Answer 3

在代码中设置活动类后，需要执行以下操作。

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

var title = $this.attr('title'); // get the current title
title = title.substr(title.indexOf(" ") + 1); // remove the first word 'add'
$(this).attr('title', 'Remove ' + title); // set the title attribute

如何使用jquery点击修复列表项

3 个答案: