无法限制要选择的复选框的数量

Question

I'm using foreach loop to generate the checkboxes in my form. It is given below.

<?php $index = 0;
foreach($cameramen as $n_key){ ?>
    <div class="checkbox">
        <label>
            <input type="checkbox" id="cameramen_<?php echo $index+1; ?>" name="cameramen" class="subscriber" value="<?php echo $index+1; ?>">

            <?php 
                echo $n_key->emplist3; 
                $index++;
            ?>

        </label>
    </div>
    <br/><br/>
<?php } ?>  

I want to limit the number of checkboxes to be selected by the user to two. I used the following javascript function but it not worked(It allows to select all the checkboxes).

 $("input[name=cameramen]").change(function(){
    var max= 2;
    console.log($("input[name=cameramen]:checked").length);
    if( $("input[name=cameramen]:checked").length == max ){
        $("input[name=cameramen]").attr('disabled', 'true');
        $("input[name=cameramen]:checked").removeAttr('disabled');
    }else{
         $("input[name=cameramen]").removeAttr('disabled');
    }
  });

Someone please help me to solve this problem which I have being struggling for hours to solve.

Answer 1

You can try this:

$(document).ready(function(){  

    $(".cb").on('click', function(e) {
    var count = 0;
    var list = $('.cb');
    
    $('.cb').each(function(i) {
        
      if($(this).is(':checked')) {
        count++;
      }
      
    });
    
    if(count > 2)
    {
        alert('You cannot check more than 2 checkboxes!');
        $(this).prop('checked', false);
      
      //return false;
    } else {
        return true;
    }
    
  });

});  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

  <input class="cb" type="checkbox">Checkbox 1
  <br />
  <input class="cb" type="checkbox">Checkbox 2
  <br />
  <input class="cb" type="checkbox">Checkbox 3
  <br />
  <input class="cb" type="checkbox">Checkbox 4

</div>

Hope this helps!

</div>