title: Add a class when the maximum number of elements have been selected
body: <p>The code I have below adds a class "disabled" and an alert when attempting to click on a 4th element when 3 list elements have been selected.</p>
  
  <p>I want to have the class added when the 3rd element is selected/clicked rather than what it is doing now and adding the class when the 4th element is trying to be selected.  I still want the alert to show when trying to select more than 3 elements of course.</p>
  
  <p>How can I accomplish this?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  jQuery(function ($) {
      $(document).on('mousedown', 'ul.image_picker_selector li', function (evt) {
          evt.preventDefault();
          evt.stopPropagation();
  
          // get the number of items already selected:
          var ctSelected = $(this).siblings('.selected').length;
  
          if (ctSelected === 3) {
              $(this).closest('.image_picker_selector').find('li:not(.selected)').addClass('disabled');
              alert('You have already selected 3 items!' + ('\n') + 'You can undo a selection.');
          } else {
              $(this).toggleClass('selected');
          }
          if (ctSelected &lt; 3) {
              $(this).closest('.image_picker_selector').find('li:not(.selected)').removeClass('disabled');
          }
  
      });
  })
  &lt;/script&gt;
  
      &lt;ul class="thumbnails image_picker_selector"&gt;
      &lt;li&gt;
      &lt;div class="thumbnail required"&gt;
      &lt;img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q4-1.jpg"&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
      &lt;div class="thumbnail selected required"&gt;
      &lt;img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q4-2.jpg"&gt;
      &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
      &lt;div class="thumbnail selected required"&gt;
      &lt;img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q4-3.jpg"&gt;
      &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="selected"&gt;
      &lt;div class="thumbnail selected required"&gt;
      &lt;img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q4-4.jpg"&gt;
      &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;div class="thumbnail required"&gt;
      &lt;img class="image_picker_image" src="http://www.style-card.co.uk/id/assets/img/signup/Q4-5.jpg"&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>