Limit jQuery checkbox

Question

I am creating a system where I list images of the bank and below each image has a checkbox, all this within a for to take the images of the bank, wanted a function to be able to limit the amount of checkbox or photos that the user can select, I’m using CI, follow the view

        <div class="tab-content">
                <div class="tab-pane active" id="select">
                    <h4 class="info-text"> Selecione suas <b>10</b> fotos: </h4>
                    <div class="row">
                    <?php foreach ($for_fotos as $dados) : ?>
                      <div class="col-sm-6 col-md-4">
                        <div class="thumbnail">
                          <img src="<?php echo base_url($dados['path'].'/'.$dados['nome']); ?>" alt="<?php echo $dados['nome'] ?>">
                          <div class="caption">
                            <p>
                              <div class="checkbox">
                                <label>
                                  <input class="limited" type="checkbox" value="">
                                  Selecionar
                                </label>
                              </div>
                            </p>
                          </div>
                        </div>
                      </div>  
                    <?php endforeach; ?>  
                    </div>
                </div>
            </div>
            <div class="wizard-footer">
                    <div class="pull-right">
                        <input type='submit' class='btn btn-next btn-fill btn-warning btn-wd btn-sm' value='PRÓXIMO' />
                        <!--<input type='button' class='btn btn-finish btn-fill btn-warning btn-wd btn-sm' name='finish' value='Finish' />-->
                    </div>
                    <div class="pull-left">
                        <?php echo anchor('selecao/voltar', 'Voltar', 'class="btn btn-previous btn-fill btn-default btn-wd btn-sm"'); ?>
                    </div>
                    <div class="clearfix"></div>
            </div>
            <?php echo form_close(); ?> 
    </div>

I’ll also leave the scren for you to follow

Answer 1

Well, you can count the number of checkboxes marked using jQuery and then compare with the set limit value and block the user action as follows.

$(document).on('click', '.limited', function(){
   var limit = 2;
   var counter = $('.limited:checked').length;
   if(counter > limit) {
      this.checked = false;
      alert('Limite atingido');
   }
});

Example: https://jsfiddle.net/0mj39ksx/2/