2

我有两个以上的复选框列表。我想限制用户为每个复选框列表仅选择 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。请帮忙

解决方案：

<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>

谢谢大家:)

4

7 回答 7

2

您可以使用checked复选框计数。您需要添加两个复选框的选中计数，以确保selections它们都恰好两个。

if($('[id*=CheckBoxList1]:checked').length + $('[id*=CheckBoxList2]:checked').length > 2)
{
  alert("Error");
}
于 2013-01-04T07:04:46.587 回答
2 
$('#CheckBoxList1 input[type=checkbox],#CheckBoxList2 input[type=checkbox]').bind('click',function(){
  if($(this).siblings(":checked").length > 2){
     e.preventDefault();
     return false;
  }
});
于 2013-01-04T07:58:59.603 回答
1

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

$("#CheckBoxList1, #CheckBoxList2").on("change click", function (e) {
  if ($("#CheckBoxList1:checked, #CheckBoxList2:checked").length > 2) {
    e.preventDefault();
    // add additional error code here;
  }
});
于 2013-01-04T07:07:30.287 回答
1

你可以使用这样的功能。 

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');              
     }
}
于 2013-01-04T07:09:39.270 回答
1

我想你是在这个之后：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/

于 2013-01-04T07:41:41.933 回答
0 
$("#CheckBoxList1, #CheckBoxList2").click(function (e) {
    if($('#'+this.id+' input[type="checkbox"]:checked').length >2){
      e.preventDefault();
  }
});
于 2013-01-04T09:29:56.960 回答
0

如果它是aspx页面，我认为：

$('#<%= CheckBoxList1.ClientID %>').click(function (e) {
   if ($('#<%= CheckBoxList1.ClientID %> input[type=checkbox]:checked').length > 2)
     e.preventDefault();
});
于 2015-12-17T04:22:51.827 回答