CODEWITHSUNDEEP
javascriptjqueryjquery-ui
user1421432
user1421432

Reputation: 103

how to make selectable limit on tables

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

Upvotes: 2

Views: 116

Answers (2)

David Stetler
David Stetler

Reputation: 1451

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/

Upvotes: 1

teenup
teenup

Reputation: 7667

What do you want to achieve? Which limits are you talking about? If you use lt(4)in the filter, you are asking selectable that only first 4 boxes are allowed to be selected.

I have modified your fiddle: http://jsfiddle.net/dw6Hf/40/, you will see the following added:-

     if($(".ui-selected").length>4)
          {
     $(".ui-selected", this).each(function(i,e){
         if(i>3)
         {
         $(this).removeClass("ui-selected");
         }
     });   
return;              
          }

This will now select a maximum of 4 boxes..

UPDATE: Disallowing during they are being selected:- http://jsfiddle.net/dw6Hf/43/

selecting: function(i,e){
                    if($(".ui-selecting").length>4)
          {
     $(".ui-selecting", this).each(function(i,e){
         if(i>3)
         {
         $(this).removeClass("ui-selecting");
         }
     });   
return;              
          }     
        },

Upvotes: 2

Related Questions