jquery 根据选择限制复选框

Question

$("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');
    } 
 })

我有一个带有一组复选框的表单，我想确保选中的复选框数量与提交的问题数量相同。我有一个 jquery 验证来阻止做出太多选择，但我找不到任何代码示例来确保也满足最低要求。

我试过这段代码，但它不能正常工作。我进行了很多 google 搜索，但没有看到使用下拉列表来限制可以选中的复选框数量并需要最小数量的好例子。

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

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

我似乎找不到任何格式问题，但它不起作用。
如果用户选择 4 个问题，则必须在提交表单之前检查 4 个问题。我尝试向验证器添加规则，但未能运行。任何指导将不胜感激。

Answer 1

您可以使 minlength 参数动态化：

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

请注意，您的规则中的输入元素名称不正确（checkbox[] 而不是 questionid[]）。此外，您的代码中发生了很多奇怪的事情。我很想详细说明，但现在，看看这个重写的例子（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);
});

jquery 根据选择限制复选框

jquery limit checkboxes based on selection

javascript

jquery

checkbox

jquery-validate

html-select