How to make an Ul list item unselected

Question

I have the following ul. I want a specific list item to be unavailable.

<ul> <li>ABC</li> <li>PQR</li> <li>XYZ</li> </ul> 

How can i do this? I tried installing the following css class but didn't help

 .unselectable { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none } 

Answer 1

It works, but I think the problem you may encounter is how you customize your HTML.

Make sure that the <li> elements you want not to select have an unselectable class, as shown in this example:

 <li class="unselectable">unselectable</li> 

Fiddle:
http://jsfiddle.net/TtLQa/1/

Also, refer to this link for browser support information regarding user-select:none .

---

Edit:

I just saw your comment, you want to do it through javascript.

Using jQuery, you can easily add or remove a class as you like:

 $(element).addClass("unselectable"); $(element).removeClass("unselectable"); //removes it if it is there, or adds it if it is not $(element).toggleClass("unselectable"); 

Fiddle:
http://jsfiddle.net/TtLQa/4/