Question

我有两个以上的复选框列表。我想限制用户为每个复选框列表仅选择2个项目。

    <asp:CheckBoxList ID="CheckBoxList1" runat="server">
        <asp:ListItem Value="Item 1">Item 1</asp:ListItem>
        <asp:ListItem Value="Item 2">Item 2</asp:ListItem>
        <asp:ListItem Value="Item 3">Item 3</asp:ListItem>
        <asp:ListItem Value="Item 4">Item 4</asp:ListItem>
    </asp:CheckBoxList>

    <asp:CheckBoxList ID="CheckBoxList2" runat="server">
        <asp:ListItem Value="Item 1">Item 1</asp:ListItem>
        <asp:ListItem Value="Item 2">Item 2</asp:ListItem>
        <asp:ListItem Value="Item 3">Item 3</asp:ListItem>
        <asp:ListItem Value="Item 4">Item 4</asp:ListItem>
    </asp:CheckBoxList>

使用javascript / jquery。请帮忙

SOLUTION：

<script type="text/javascript">
    var i = 1;
            $(document).ready(function () {
            $('table[id^=CheckBoxList]').each(function (index) {
                var id = '#' + this.id;
                $(id).click(function (e) {
                  if ($(id).children().find('input[type="checkbox"]:checked').length > 2) {
                        e.preventDefault();
                    }
                });
                i++;
            });
        });

</script>

谢谢所有人：）

Answer 1

您可以使用checked个复选框。您需要添加两个复选框的已检查计数，以确保两个复选框中只有两个selections。

if($('[id*=CheckBoxList1]:checked').length + $('[id*=CheckBoxList2]:checked').length > 2)
{
  alert("Error");
}

Answer 2

$('#CheckBoxList1 input[type=checkbox],#CheckBoxList2 input[type=checkbox]').bind('click',function(){
  if($(this).siblings(":checked").length > 2){
     e.preventDefault();
     return false;
  }
});

Answer 3

验证已检查项目的数量并取消检查其他项目的事件。

$("#CheckBoxList1, #CheckBoxList2").on("change click", function (e) {
  if ($("#CheckBoxList1:checked, #CheckBoxList2:checked").length > 2) {
    e.preventDefault();
    // add additional error code here;
  }
});

Answer 4

你可以使用这样的功能。

function CheckCheck()
{
    var chkBoxList=document.getElementById('<%=CheckBoxList1.ClientID %>');    
    var chkBoxCount=chkBoxList.getElementsByTagName("input");
    var i=0;
    var tot=0;
    for(i=0;i<chkBoxCount.length;i++)
     {
          if(chkBoxCount[i].checked)
          {
              tot=tot+1;
          }
     }

    if(tot>2)
     {
          alert('Cannot check more than 2 check boxes');              
     }
}

Answer 5

我认为你是在这之后： http://jsfiddle.net/KCr4d/10/

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
  //--^^^^^^^^^^^^^^^^^^^^^^^make a reference to this file

$(function(){ // <-- doc ready starts (short handler for doc ready)

$('#CheckBoxList1 input[type="checkbox"]').click(function(e) {
   if ($('#CheckBoxList1').children().find('input[type="checkbox"]:checked').length > 2) {
      e.preventDefault();
   }
});

$('#CheckBoxList2 input[type="checkbox"]').click(function(e) {
   if ($('#CheckBoxList2').children().find('input[type="checkbox"]:checked').length > 2) {
      e.preventDefault();
   }
});
}); // <---doc ready ends

您可以在小提琴中查看： http://jsfiddle.net/KCr4d/10/

Answer 6

$("#CheckBoxList1, #CheckBoxList2").click(function (e) {
    if($('#'+this.id+' input[type="checkbox"]:checked').length >2){
      e.preventDefault();
  }
});

Answer 7

如果是aspx页面，我估计：

$('#<%= CheckBoxList1.ClientID %>').click(function (e) {
   if ($('#<%= CheckBoxList1.ClientID %> input[type=checkbox]:checked').length > 2)
     e.preventDefault();
});

如何使复选框列表只选择两个项目？

7 个答案: