CODEWITHSUNDEEP
javascriptjqueryasp.net
user1947710
user1947710

Reputation:

how to make an checkboxlist select only two item?

i have more than two checkboxlist. i want to limit users to select only 2 items for each checkboxlist.

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

using javascript/jquery. Please help

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>

Thankz all :)

Upvotes: 2

Views: 4920

Answers (7)

Peter.Wang
Peter.Wang

Reputation: 2211

If it aspx page I reckon:

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

Upvotes: 0

Jai
Jai

Reputation: 74738

I think you are after this: 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

You can check this out in the fiddle: http://jsfiddle.net/KCr4d/10/

Upvotes: 1

TechDo
TechDo

Reputation: 18629

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

Upvotes: 0

Brune
Brune

Reputation: 1060

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

Upvotes: 2

coder
coder

Reputation: 2000

you can use a function like this. 

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

Upvotes: 1

Andrew Hubbs
Andrew Hubbs

Reputation: 9426

Validate the number of checked items and cancel the events that would check additional items.

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

Upvotes: 1

Adil
Adil

Reputation: 148120

You can use count of checked checkboxes. You need to add the checked count of both checkboxes to ensure exactly two selections from both of them.

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

Upvotes: 2

Related Questions