Question

I have a trouble solving out this fiddle. When i put limits i am not able to select any boxes.
Any suggestions??

I have make the following fiddle to show the example.

http://jsfiddle.net/dw6Hf/28

  $(function() {
    $(".selectable").selectable({
 filter: "td.cs:lt(4)",

      stop: function(){
        var result = $("#select-result").empty();
        var result2 = $("#result2");
      $('.ui-selecting:gt(31)').removeClass("ui-selecting");

     $(".ui-selected", this).each(function(){

          var cabbage = this.id + ', ';
          result.append(cabbage);
        });

        var newInputResult = $('#select-result').text(); 
            newInputResult = newInputResult.substring(0, newInputResult.length - 1);
            result2.val(newInputResult); 
      }
    });
  });

Thanks

Answer 1

here is another solution, it does not use JqueryUI but may be what you want anyway. It basically toggles the class selected on clicked boxes, with a maximum of 4 being able to be selected. I added the class selected to your css

$(".cs").click(function(){
 var numItems = $('.selected').length   
if(numItems < 4) {          
     $(this).toggleClass("selected");   
}   

if(numItems == 4 && $(this).hasClass("selected")) {

    $(this).removeClass("selected"); 
}           

});​

http://jsfiddle.net/NHnU5/1/