How to clickable fix list item in using jquery

Question

I have multiple list items,i just want to do that a user only select upto 5 options. not more than that. if the user select more than 5 option the list item by defualt disabled.

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>

$("#chkResult").val(); by itself doesn't do anything, btw. Use the setter form of val if you want to change the value: $("#chkResult").val('something'); — some-non-descript-user, Jun 25 '14 at 12:08
possible duplicate of [How to change an element's title attribute using jQuery](http://stackoverflow.com/questions/987967/how-to-change-an-elements-title-attribute-using-jquery) — Ja͢ck, Jun 25 '14 at 12:08

Anto Subash · Accepted Answer · 2014-06-25T12:46:15.543

0

try this

$(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
});

edited Jun 25 '14 at 12:46

answered Jun 25 '14 at 12:09

Anto Subash

3,140
2
22
30

edit the rest of the code to use `that` too that would be more consistent – GillesC Jun 25 '14 at 12:11
Cool, just need to fix that `$that` now :) – GillesC Jun 25 '14 at 12:14
Thanks it's work fine. but, The thing is that we have more than 100 list items and therefore editing each one of them would require hell of a time. is there any function to catch the id of li and change the title. – user3475817 Jun 25 '14 at 12:36
@user3475817 if you have more elements then delegate the event. see the updated answer – Anto Subash Jun 25 '14 at 12:49

score 0 · Answer 2 · answered Jun 25 '14 at 12:10

Use following

When li is clicked 1st time then title changes to Remove one when clicked for 2nd time then "Add one" ,so it goes on for Even and Odd click.

Working fiddle 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
});

`$("#chkResult").val();` doesn't reset the value `$("#chkResult").val("");` however does — GillesC, Jun 25 '14 at 12:13

score 0 · Answer 3 · answered Jun 25 '14 at 12:15

You need to do the following after you set the active class in your code.

$(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

How to clickable fix list item in using jquery

3 Answers3