I have 6 input checkboxes and if checkboxes are checked more than 3 the last one gets unchecked. For better understanding refer my previous question. Which is solved.

Now, I have another problem, Now 3 checkboxes are checked already by Math.random. On click of any unchecked checkbox. I'm getting error in console.

Uncaught TypeError: Cannot read property 'prop' of undefined

Fiddle Demo

code below:

var random_checked = $("input[type=checkbox]").get().sort(function(){ 
    return Math.round(Math.random())-0.6; //so we get the right +/- bo
}).slice(0,3);
$(random_checked).prop('checked', true);



var checked = [];
$('input[type=checkbox]').change(function(e) {
    var num_checked = $("input[type=checkbox]:checked").length;
    if (num_checked > 3) {
        checked[checked.length - 1].prop('checked', false);
        checked.pop();
    }
    if($.inArray($(this), checked) < 0){
        checked.push($(this));
    }
});

I have 6 input checkboxes and if checkboxes are checked more than 3 the last one gets unchecked. For better understanding refer my previous question. Which is solved.

Now, I have another problem, Now 3 checkboxes are checked already by Math.random. On click of any unchecked checkbox. I'm getting error in console.

Uncaught TypeError: Cannot read property 'prop' of undefined

Fiddle Demo

code below:

var random_checked = $("input[type=checkbox]").get().sort(function(){ 
    return Math.round(Math.random())-0.6; //so we get the right +/- bo
}).slice(0,3);
$(random_checked).prop('checked', true);



var checked = [];
$('input[type=checkbox]').change(function(e) {
    var num_checked = $("input[type=checkbox]:checked").length;
    if (num_checked > 3) {
        checked[checked.length - 1].prop('checked', false);
        checked.pop();
    }
    if($.inArray($(this), checked) < 0){
        checked.push($(this));
    }
});

• javascript
• jquery
• html
• forms
• checkbox

• 1 checked[checked.length - 1] is undefined – Rino Raj Commented Apr 8, 2016 at 13:17
• To get rid of error check for length of checked array : if (num_checked > 3 && checked.length > 0) { ---- jsfiddle/usx8Lkc5/15 – Zaki Commented Apr 8, 2016 at 13:20
• It is defined. If I just remove match.random or by default selection then it works. see jsfiddle/usx8Lkc5/14. – Ganesh Yadav Commented Apr 8, 2016 at 13:20
• @zaki.. Your solution is good. it's works but at the same time 4 checkboxes should not be selected. If 4th one gets selected then the last one should get deselect at the same time. see jsfiddle/usx8Lkc5/16 – Ganesh Yadav Commented Apr 8, 2016 at 13:23

3 Answers 3

You can try the below code

var checked = $('input[type=checkbox]:checked').map(function(){
 return $(this);
}).get(); // First change
$('input[type=checkbox]').change(function(e) {
    var num_checked = $("input[type=checkbox]:checked").length;
    if (num_checked > 3) {
         $(checked.pop()).prop('checked', false);// Second change
    }
    if($.inArray($(this), checked) < 0){
        checked.push($(this));
    }
});

DEMO FIDDLE

Changes Made

► Stored the currently checked elements to an array using

var checked = $('input[type=checkbox]:checked').map(function(){
 return $(this);
}).get();

► $(checked.pop()) is used to select the last inserted element.

Why your code was not working?

As per you code var checked = []; will be empty at the initial stage. So checked[checked.length - 1] will bee undefined.

You should push initial items in checked list.

$(random_checked).each(function(){
    console.log($(this));
    checked.push($(this));
});

https://jsfiddle/usx8Lkc5/18/

This one works, just simply adding lastChecked = random_checked[2]; so that your lastChecked is defined.

var random_checked = $("input[type=checkbox]").get().sort(function(){ 
 var test = Math.round(Math.random())-0.6;
 return test; //so we get the right +/- bo
}).slice(0,3);

$(random_checked).prop('checked', true);
    lastChecked = random_checked[2];
var $checks = $('input:checkbox').click(function(e) {
    var numChecked = $checks.filter(':checked').length;
    if (numChecked > 2) {
        alert("sorry, you have already selected 3 checkboxes!");
        lastChecked.checked = false;
    }
    lastChecked = this;
});