check the limited checkbox on single click using jQuery-CodePudding

 var max_limit = 3;
// only 3 checkboxes are allowed manually check checkboxes
  $( document ).ready(function() {
        $('input:checkbox[name="chkBox"]').on('change', function (e) {
            if ($('input:checkbox[name="chkBox"]:checked').length > 3) {
                $(this).prop('checked', false);
                alert("Only 3 selections are allowed");
            }
        });
        
     
  // for select 3 i tried below code but it is not working
  var rowCount = $("#example tr").length;
            if(rowCount < max_limit)
            {
                max_limit = rowCount;
            }
           
            for(var i=1; i <= max_limit; i  ){
                $('input:checkbox[name="chkBox"]').index(i).prop('checked', this.checked); 
                    
                 
            }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="example"  width="100%" cellspacing="0">
<thead>
  <tr>
    <th>Animal</th>
    <th >Select 3 <input type="checkbox"  name="selectAllChkBox" id="selectAllChkBox">     
  </tr>
 </thead>
 <tbody>
  <tr>
    <td>Cat</td>
    <td  rowspan="5"><input  type="checkbox" value="cat"  name="chkBox"></td>
  </tr>
   <tr>
    <td>Dog</td>
    <td  rowspan="5"><input  type="checkbox" value="dog"  name="chkBox"></td>
  </tr>
   <tr>
    <td>Cow</td>
    <td  rowspan="5"><input  type="checkbox" value="cow"  name="chkBox"></td>
  </tr>
   <tr>
    <td>Mouse</td>
    <td  rowspan="5"><input  type="checkbox" value="mouse"  name="chkBox"></td>
  </tr>
   <tr>
    <td>Goat</td>
    <td  rowspan="5"><input  type="checkbox" value="goat"  name="chkBox"></td>
  </tr>
    
  </tbody>
</table>

I have a table of items and in each row there is a checkbox. I don't want to permit user to select all of the checkboxes at a time. So instead of select All option i provided select 3. after clicking on it first 3 items should be selected automatically.

CodePudding user response：

This is what you are looking for:

let items = $("input[name=chkBox]");

      $("#selectAllChkBox").change(function (e) {
        if ($("#selectAllChkBox").is(':checked')) {
          for (let i = 0; i < 3; i  ) {
            $(items[i]).prop('checked', true);
          }
        } else {
          $("input[name=chkBox]").prop('checked', false);
        }
      });

      $(items).change(function (e) {
        let current_item = e.target;

        let checked_items = $("input[name=chkBox]:checked");
        if (checked_items.length > 3) {
          alert('You can only select three items!');
          $(this).prop('checked', false);
        }
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="example"  width="100%" cellspacing="0">
      <thead>
        <tr>
          <th>Animal</th>
          <th >Select 3 <input type="checkbox"  name="selectAllChkBox" id="selectAllChkBox">
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Cat</td>
          <td  rowspan="5"><input  type="checkbox" value="cat" name="chkBox"></td>
        </tr>
        <tr>
          <td>Dog</td>
          <td  rowspan="5"><input  type="checkbox" value="dog" name="chkBox"></td>
        </tr>
        <tr>
          <td>Cow</td>
          <td  rowspan="5"><input  type="checkbox" value="cow" name="chkBox"></td>
        </tr>
        <tr>
          <td>Mouse</td>
          <td  rowspan="5"><input  type="checkbox" value="mouse" name="chkBox"></td>
        </tr>
        <tr>
          <td>Goat</td>
          <td  rowspan="5"><input  type="checkbox" value="goat" name="chkBox"></td>
        </tr>

      </tbody>
    </table>