jQuery功能禁用選項列表的其餘部分

Question

我被困在以下幾點：

我有一個基於純html列表的選項列表。我想讓這個列表能夠選擇多個選項。我寫了一個函數來做到這一點。現在，我的問題是，如果這個js函數調用，該函數禁用特定數量的條目。

示例：當列表中有5個以上的選項並且選擇了5個選項時，其餘選項將被禁用。

CSS

<style> 
     ul li{list-style:none; float:left; margin-right:20px; cursor:pointer} 
     ul li p.active{text-decoration:underline} 
    </style> 

JS

<script type="text/javascript"> 

     $(function() { 
      var countLi = 5; 
      //Checkboxes 
      $("#chk>li>p").click(function() { 
       if ($(this).hasClass("active")) { 
        countLi -= 1; 
        if ($("#chkResult").val() != "") { 
         $("#chkResult").val($("#chkResult").val().replace("," + $(this).html(), "")); 
         $("#chkResult").val($("#chkResult").val().replace($(this).html() + ",", "")); 
         $("#chkResult").val($("#chkResult").val().replace($(this).html(), "")); 
        } 
        else { 
         countLi += 1; 
        } 

        if (count == 0) { 
         $("#chk>li>p").each(function() { 
          if (!($(this).hasClass("active"))) { 
           $(this).attr("disabled", "true"); 
          } 
         }); 
        } 
        else { 

         $("#chk>li>p").removeAttr("disabled"); 
        } 
       } 
       else { 
        if ($("#chkResult").val() == "") { 
         $("#chkResult").val($(this).html()); 
        } 
        else { 
         $("#chkResult").val($("#chkResult").val() + "," + $(this).html()); 
        } 
       } 

       $(this).toggleClass("active"); 
      }); 
     }); 

    </script> 

HTML

<ul id="chk"> 
      <li><p>One</p></li> 
      <li><p>Two</p></li> 
      <li><p>Three</p></li> 
      <li><p>Four</p></li> 
      <li><p>Five</p></li> 
      <li><p>Six</p></li> 
      <li><p>Seven</p></li> 
      <li><p>Eight</p></li> 
      <li><p>Nine</p></li> 
      <li><p>Ten</p></li> 
     </ul> 
     <br /> 
     <input id="chkResult" type="text" style="width:500px;"/> 

Answer 1

您需要使用jQuery的:lt選擇，如：

$('#chk>li>p.active:lt(5)') 

這會自動縮小選擇器的返回集到第一個n匹配項。