可選限制點

Question

我正在嘗試使此可選腳本具有選擇限制。我想它的時候選擇的上限超過限制數量爲4

http://jsfiddle.net/dw6Hf/51/

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

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

     // alert($(".ui-selected").length); 
      $('#divmsg').html($(".ui-selected").length*2+ " box selected") 
      if ($(".ui-selected").length > 4) { 
       //alert("Selection of only 4 allowed"); 
       $('#divmsg').html($('#divmsg').html() + ", Selection of only 4 allowed"); 
       $(".ui-selected").each(function(i, e) {     
        if (i > 3) { 

         $(this).removeClass("ui-selected"); 
        } 
       }); 
       return; 
      } 

      $(".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); 
     } 
    }); 
});​ 

謝謝

Answer 1

OK。現在我明白了這個要求，應該讓你停止選擇你要求什麼。從停止狀態變爲可選狀態意味着您可以在「已選擇」之前決定，而不是在停止被觸發之後決定。

fiddle

Answer 2

這工作

$("#selectable").selectable({ 
    selecting: function(event, ui) { 
     if ($(".ui-selected, .ui-selecting").length > 4) { 
      $(ui.selecting).removeClass("ui-selecting"); 
     } 
    }  
}); 

的this重複

編輯 這樣的事情？

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

     // do not allow selecting more than four items 
     selecting: function(event, ui) { 
      if ($(".ui-selected, .ui-selecting").length > 4) { 
       $(ui.selecting).removeClass("ui-selecting"); 
      } 
     }    

     // do whatever you like with the selected 
     stop: function() { 
      var result = $("#select-result").empty(); 
      var result2 = $("#result2");    

      $('#divmsg').html($(".ui-selected").length*2+ " box selected") 

      $(".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); 
     } 
    }); 
});?