icheck plugin does not disable all checkbox

Question

Boas, I have the problem that I have 6 checkbox but can only select a maximum of 2 before submitting the form. What happens is that by clicking on the third box it gives the message and clears the previous two and the third one is selected, and I can’t deselect on all 5 checkboxes with the iCkeck plugin.

	$('.selcheck').on('ifChecked', function(event){
		
		if ($('.selcheck').filter(':checked').length > 2 ) {
			
			alert('Só é permitido escolher 2 opções.');
						
			$('#d1, #d2, #d3, #d4, #d5, #d6').iCheck('uncheck');
			
		}
	
	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input id='d1' type='checkbox' class='selcheck'/>
<input id='d2' type='checkbox' class='selcheck'/>
<input id='d3' type='checkbox' class='selcheck'/>
<input id='d4' type='checkbox' class='selcheck'/>
<input id='d5' type='checkbox' class='selcheck'/>

Solution:

    $('.selcheck').on('ifChecked', function(event){

    var limpa = 0;

    if ($('.selcheck').filter(':checked').length > 2 ) {

        alert('Só é permitido escolher 2 opções.');

        limpa = 1;

    }

    $(function() {

        if (limpa == 1){
            $('.selcheck').iCheck('uncheck');
        }
    });
});

Answer 1

From what I understand of your problem, I do not think it necessary to use the plugin iCheck only to uncheck the checkbox. In the code I updated I left an instruction not to leave the third checkbox checked and to uncheck all when you reach the checkbox mark limit - following your intention when using the iCheck.

$(function() {

  $('.selcheck').click(function(event) {

    const $checkboxs = $('.selcheck');

    if ($checkboxs.filter(':checked').length > 2) {
      alert('Só é permitido escolher 2 opções.');

      $(this).prop('checked', false); // Desmarcar elemento atual
      //$checkboxs.prop('checked', false); // Desmarcar todos os elementos

      //$('#d1, #d2, #d3, #d4, #d5, #d6').iCheck('uncheck');
    }

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input id='d1' type='checkbox' class='selcheck' />
<input id='d2' type='checkbox' class='selcheck' />
<input id='d3' type='checkbox' class='selcheck' />
<input id='d4' type='checkbox' class='selcheck' />
<input id='d5' type='checkbox' class='selcheck' />

Answer 2

Hello, I did it in two ways, with pure javascript (always good to know) and with jQuery.

PS: I updated the example to demonstrate how it would be done with the icheck.

PS2: the icheck did not render the checkboxes correctly so I made a timer to go checking one by one, so the event is called and the code checks the count and unchecks all if necessary, resetting the count.

// Exemplo com JS apenas..
/*
const checkList = document.querySelectorAll('[name=selcheck]');

Array.prototype.forEach.call(checkList, function(check) {
  check.addEventListener('change', function(evt) {
    var checked = Array.prototype.filter.call(checkList, function(c) {
      return c.checked;
    });
    
    if(checked.length > 2) {
      alert("É permitido selecionar apenas 2 items.");
      checked.forEach(function(c) { c.checked = false });
    }
  });
});
*/


// Exemplo jQuery
/*
$('input[name=selcheck]').on('change', function(evt) {
  var checkedList = $('input[name=selcheck]:checked');
  if(checkedList.length > 2) {
    alert("só pode selecionar 2..");
    $(checkedList).prop('checked', false);
  }
});
*/

// Exemplo iCheck
let checked = 0;
var checkboxes = $('input[name=selcheck]');
checkboxes.iCheck();
checkboxes.on('ifChecked', function(evt) {
  let checkedChecks = checkboxes.filter('input:checked');
  
  console.log(checkedChecks.length);
  
  if(checkedChecks.length > 2) {
    alert('only 2 allowed..');
    checked = 0;
    checkedChecks.iCheck('uncheck');
  }
});

setInterval(function() {
  let checkbox = $(checkboxes[checked++]);
  checkbox.iCheck('check');
}, 3000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>

<input id='d1' name='selcheck' type='checkbox' class='selcheck' />
<input id='d2' name='selcheck' type='checkbox' class='selcheck' />
<input id='d3' name='selcheck' type='checkbox' class='selcheck' />
<input id='d4' name='selcheck' type='checkbox' class='selcheck' />
<input id='d5' name='selcheck' type='checkbox' class='selcheck' />