Limit/disable/enable checkbox

Question

i have a problem regarding to this link : Limiting default checked checkboxes .

I extend the code for validation of the script, Here's what i want to do.

1. I want a default checked checkbox.
2. i want to limit the selection of checkbox for example: if mvp is 3 i should select 3 and disable the rest of the checkbox just like this. Limit Checkbox .
3. I want to disable submit button if the selection is not reach for example if the given maximum number is 5. the submit button will not be enable if the selection is not 5 checked.

Here's my sample code:

var mvp = 5;

$(document).ready(function() {


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

$("input:checkbox").click(function() {

  var bol = $("input:checkbox:checked").length != mvp;

  if(bol){
  alert("You have to choose "+ mvp +" mvp's only");
  this.checked = false;
  $("#button-cart").attr("disabled", true);
  }
  else{
  $("input:checkbox").not(":checked").attr("disabled",bol);
  $("#button-cart").attr("disabled", false);
  }
});

});

Here's the fiddle: fiddle

Based on the example i set the value of mvp in 5. the when the page loads there are default 5 checkbox checked. then if you uncheck 1 then the alert will trigger that it says you should have 5 mvp's, then the button will disable. once you check again a checkbox, the button will appear. but there are 2 left checkboxes that the user can select. but if the user exceed to 5 selections then the alert will trigger again and return it to 5 checked checkboxes. problem here is the button will remain disabled.

Can you help me to do this kind of logic :D thanks in advance..

Answer 1

Try this,

var mvp = 5;
$(document).ready(function () {
    $("input:checkbox").each(function (index) {
        this.checked = (index < mvp);
    }).click(function () {
       en_dis= $("input:checkbox:checked").length < mvp
       $('#button-id').prop('disabled', en_dis);
       // to disable other checkboxes
       $('input:checkbox:checked').length >= mvp &&
           $("input:checkbox:not(:checked)").prop('disabled',true);
    }).change(function () {
       if ($(this).siblings(':checked').length >= mvp) {
           this.checked = false;
       }
    });
});

Working Demo and Updated Demo

Answer 2

You shouldn't set the checked property of the checkbox and also disable the button.

Here you go:

$(function () {
    var $button = $('#button-id'),
        mvp     = 5;

    $("input:checkbox").each(function (index) {
        this.checked = (index < mvp);
    }).on("click", function () {
        if ($("input:checkbox:checked").length != mvp) {
            alert("You have to choose " + mvp + " mvp's only");
            $button.prop("disabled", true);
        } else {
            $("input:checkbox").not(":checked").prop("disabled", false);
            $button.prop("disabled", false);
        }
    });
});

Working demo: http://jsfiddle.net/R79cM/

Answer 3

Write:

$("input:checkbox").each(function (index) {
    this.checked = (index < mvp);
});
$("#button-id").attr("disabled", true);
disable();
$("input:checkbox").change(function () {
    var bol = $("input:checkbox:checked").length != mvp;
    if (bol) {
        alert("You have to choose " + mvp + " mvp's only");            
        $("#button-id").attr("disabled", true);
        enable();
    } else {
        $("input:checkbox").not(":checked").attr("disabled", bol);
        $("#button-id").attr("disabled", false);
        disable();
    }        
});
function enable(){
    $("input:checkbox").not(":checked").each(function(){
        $(this).removeAttr("disabled");
    });
}
function disable(){
    $("input:checkbox").not(":checked").each(function(){
        $(this).attr("disabled","disabled");
    });
}

Updated fiddle here.