jquery - How to limit the amount of options selected to 3 on multiselect in wordpress -

this code using in wordpress latest version using jquery 1.8.3

i want limit options 3. ideas?

        <script type="text/javascript">     jquery(function($){        $('ul.image_picker_selector li').click(function() {         $(this).toggleclass('selected');          if ($('.selected').length > 3) {             $(this).toggleclass('selected');             alert('you have selected 3 items!' + ('\n') + 'you can undo selection.');         }     });     })         </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> 

edit - webpage having problems with, if help. knoweledge of jquery pretty poor unfortunately.

http://style-card.co.uk/id/register/

edit 2 - have updated code using.

ok. click event /could/ use, still need use .on(). plugin use makes changes dom, , .click() fragile... not work dynamically added elements. try this:

jquery(function($){    $(document).on('click', 'ul.image_picker_selector li', function() {     $(this).toggleclass('selected');      if ($('.selected').length > 3) {         $(this).toggleclass('selected');         alert('you have selected 3 items!' + ('\n') + 'you can undo selection.');     } }); }) 

the main problem here, however, may not stop selection. might want try instead looking 'mousedown'. if intercept mousedown, can catch selection before it's made, in theory, , cancel selection if you're @ count of three. in case, might want this:

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');     } }); }) 

unfortunately, don't have time jsfiddle example, gives idea of approach might you.

[updated] had free time today, , thought i'd twiddle around plugin code. see jsfiddle example of how use it: http://jsfiddle.net/mori57/l5emy/ ... can download updated plugin https://github.com/jbatchelor/image-picker

basically, add data-limit select tag:

<select class="image_picker" data-limit="3" ...etc> 

then, in code set image-picker, before instantiate image-picker itself:

var limitreached = function(){     alert("hit limit! please deselect image if want choose another!"); };  $(".image_picker").imagepicker({     limit_reached: limitreached }); 

this means should able rid of other stuff (trying capture , react mousedown event).