Limiting Default Checked checkboxes

Question

I have problem regarding on how i will limit my default checked checkbox. for example i have 7 checkboxes. and i want to limit it with 3 default checked checkboxes once the page is load.

this should be the output:

Checkbox1 : true
Checkbox2 : true
Checkbox3 : true
Checkbox4 : false
Checkbox5 : false
Checkbox6 : false
Checkbox7 : false

Here's my sample code:

var mvp = 3;
$(document).ready(function() {
$("input:checkbox").each(function( index ) {
    ($this).attr("checked",true);
});

});

I'm stock with this, i don't know where i will put my counter (mvp) inside my each function. in this code, all my checkboxes are checked :D.

Sorry for a newbie question, please help me..

Answer 1

There is actual no need for a counter since the each function will pass in the index. Just use the index as the counter.

$(document).ready(function() {
    $("input:checkbox").each(function( index ) {
           this.checked = (index < 3);
    });
});

JS Fiddle: http://jsfiddle.net/SB6aD/2/

Answer 2

Using jquery :lt selector,it will match all element which has a smaller index.

Example:

$(function() {
  var mvp = 3;
  $('input:checkbox:lt('+mvp+')').prop('checked', true);
});

Answer 3

Based of @Kevin Bowersox's code:

var mvp = 3;
$(document).ready(function() {
    var counter = 0;
    $("input:checkbox").each(function( index ) {
        if(counter < mvp){
           $(this).attr("checked",true);
           counter++;
        }
    });
});

i modified this code into this:

var mvp = 3;
    $(document).ready(function() {
$("input:checkbox").each(function( index ) {
        if(index < mvp){
           $(this).attr("checked",true);
        }
    });
});

Answer 4

Don't setup the default state of your page with Javascript, use the HTML "checked" attribute.

<form action="demo_form.asp">
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
  <input type="submit" value="Submit">
</form>

In this example the car checkbox will be checked.

Answer 5

Decrement mvp after you check each checkbox. When it reaches 0, start unchecking.

$(document).ready(function() {
    var mvp = 3;
    $("input:checkbox").each(function( index ) {
        ($this).attr("checked", mvp > 0);
        mvp--;
    });
});

Answer 6

Check .slice

$(function() {
  var mvp = 3;
  $('input:checkbox').slice(0, mvp).prop('checked', true);
  $('input:checkbox').slice(mvp).prop('checked', false);
});

See the JS Fiddle

And note, checked is rather a property than an attribute, use .prop instead of .attr.

Answer 7

demo

$(document).ready(function() {
    var checkboxes = $("input:checkbox");
    checkboxes.each(function( index ) {
        if (checkboxes.filter(':checked').length >= 3) {return;}
        this.checked = true;

    });

});