jquery limit checkboxes based on selection

Question

http://jsfiddle.net/oberlinx/sy24k2dq/

$("input[name=questionid\\[\\]]").change(function(){
    var max= document.getElementById("numqs").value; 
    if( $("input[name=questionid\\[\\]]:checked").length == max ){
        $("input[name=questionid\\[\\]]").attr('disabled', 'disabled');
        $("input[name=questionid\\[\\]]:checked").removeAttr('disabled');
    }else{
        $("input[name=questionid\\[\\]]").removeAttr('disabled');
    } 
 })

I have form with a set of checkboxes and would like to make sure that the number of check boxes checked is the same number of questions being submitted. I have a jquery validation working to stop from making too many selections but I am unable to find any code samples that allow me to make sure the minimum is met as well.

I tried this code but it is not working correctly. I have done many google searches and see no good exmples of using a drop down to limit number of checkboxes that can be checked and require a min amount.

jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
});

$( "#insertsurvey" ).validate({
    rules: {
        checkbox\\[\\]: {
            required: true,
            minlength: document.getElementById("numqs").value
        }
    }
});

I can not seem to find any formatting issues but it does not work.
If the user selects 4 questions then 4 questions must be checked before the form is submitted. I tried adding a rule to the validator but it failed to run. Any guidance would appreciated.

Answer 1

You can make the minlength parameter dynamic:

$("#insertsurvey").validate({
    rules: {
        'questionid[]': {
            required: true,
            minlength: function() {
                return parseInt($('#numqs').val(), 10);
            }
        }
    },
    messages: { 
            "questionid[]": "Please select more questions."
    } 
});

Note that you had the input element name incorrect in your rules (checkbox[] instead of questionid[]). Additionally, you had a lot of weird stuff going on in your code. I would love to elaborate but for now, take a look at this re-written example (jsFiddle):

// we're using these a lot, and your page doesn't change, so keep references handy
var $numQs = $('#numqs');
var $questions = $('input[name="questionid[]"]');

jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
});

$("#insertsurvey").validate({
    rules: {
        'questionid[]': {
            required: true,
            // use a function here, make sure to parse the value into a number
            minlength: function() {
                return parseInt($numQs.val(), 10);
            }
        }
    },
    messages: { 
            "questionid[]": "Please select more questions."
    } 
});

// re-use our reference to $questions
$questions.change(function () {
    // again, make sure you're using an actual number
    var max = parseInt($numQs.val(), 10);
    // You can even re-use it here, further filtering
    if ($questions.filter(':checked').length == max) {
        // use prop() instead of attr()
        $questions.prop('disabled', true);
        $questions.filter(':checked').prop('disabled', false);
    } else {
        $questions.prop('disabled', false);
    }
});

$("input[name=reset]").click(function () {
    $questions.prop('disabled', false);
});

$numQs.on("change", function () {
    $questions.prop('disabled', false);
    $questions.prop('checked', false);
});