javascript - 如何对表格进行可选限制

Question

我很难解决这个小提琴。当我设置限制时，我无法选择任何框。有什么建议么？？

我做了以下小提琴来展示这个例子。

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

谢谢

Answer 1

你想达到什么目标？你说的是哪些限制？如果您lt(4)在 中使用filter，您要求selectable只允许选择前 4 个框。

我已经修改了您的小提琴： http: //jsfiddle.net/dw6Hf/40/，您将看到添加了以下内容：-

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

这现在将选择最多 4 个框..

更新：在他们被选中期间不允许：- 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;              
          }     
        },

Answer 2

这是另一种解决方案，它不使用 JqueryUI，但无论如何可能是您想要的。它基本上切换在单击框上选择的类，最多可以选择 4 个。我将所选课程添加到您的 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/