jquery - How to disable elements with css -

the following code limits amount of selections 3, , provides alert no more can selected.

instead of other options disabled , greyed out css. thought simple adding of class called .disabled css style of opacity of 0.2 trick.

i tried using $('ul.image_picker_selector li').attr('class', 'disabled'); breaks rest of code , adds class options not ones arent selected.

any appreciated.

   <script type="text/javascript">     jquery(function($){        $(document).on('mousedown', 'ul.image_picker_selector li', function(evt) {         evt.preventdefault();         evt.stoppropagation();          // number of items selected:         var ctselected = $(this).siblings('.selected').length;          if (ctselected === 3) {             alert('you have selected 3 items!' + ('\n') + 'you can undo selection.');         } else {             $(this).toggleclass('selected');         }     });     })         </script>      <ul class="thumbnails image_picker_selector">     <li class="selected">     <div class="thumbnail selected">     <img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/q1-1.jpg">     </div>     </li>     <li class=""><div class="thumbnail selected">     <img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/q1-2.jpg">     </div>     </li>     <li class="">     <div class="thumbnail">     <img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/q1-3.jpg">     </div>     </li>     <li class="">     <div class="thumbnail">     <img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/q1-4.jpg">     </div>     </li>     <li>     <div class="thumbnail">     <img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/q1-5.jpg">     </div>     </li>     <li>     <div class="thumbnail">     <img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/q1-6.jpg">     </div>     </li>     </ul> 

this selector should work :

$('ul.image_picker_selector li:not(.selected)').addclass('disabled'); 

also, using addclass not breaking other css , can easy reverted removeclass unlike (if not mistaken) using attr change class.

you can go deeper , use toggleclass.