1

在这里，我在各自的 div 中有一堆复选框。

每个 div 都将包含一个“data-min”（例如：data-min="2"）值，以限制用户检查 div 中的复选框的最少数量。

演示：小提琴

HTML

<select id="count">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>
<br/>
<br/>
<div class="checkbox" data-toggle="false" data-min="2" style='float:left;background:yellow;width:100px'>
    <input id="checkbox-1" type="checkbox" name="Data1" value="option1" />
    <label for="checkbox-1">HTML</label>
    <br />
    <input id="checkbox-2" type="checkbox" name="Data2" value="option2" />
    <label for="checkbox-2">CSS</label>
    <br />
    <input id="checkbox-3" type="checkbox" name="Data3" value="option3" />
    <label for="checkbox-3">HTML</label>
    <br />
</div>
<div class="checkbox" data-toggle="false" data-min="2" style='float:left;margin-left:100px;background:brown;width:100px'>
    <input id="checkbox-4" type="checkbox" name="Data4" value="option4" />
    <label for="checkbox-4">CSS</label>
    <br />
    <input id="checkbox-5" type="checkbox" name="Data5" value="option5" />
    <label for="checkbox-5">HTML</label>
    <br />
    <input id="checkbox-6" type="checkbox" name="Data6" value="option6" />
    <label for="checkbox-6">CSS</label>
</div>

jQuery

$(document).ready(function () {
    $('#count').on('change', function () {
        $('input[type=checkbox]').prop('checked', false);
        $('[data-toggle]').data('toggle', false);
    });
    $('input[type=checkbox]').on('change', function () {
        if ($('input[type=checkbox]:checked').length > $('#count').val()) {
            $(this).prop('checked', false);
        }
    });
    $('.checkbox').on('click', function (e) {
        var cnt = $('input[type="checkbox"]:checked').length;
        var cntSel = $('select').val();
        var fin = cntSel - cnt;

        var min = $('.checkbox').data('min');

        if (e.target.className == "checkbox") {
            if ($(this).data('toggle') == false) {
                $(this).data('toggle', true);
                $(this).find('input[type="checkbox"]:lt(' + fin + ')').prop('checked', true);
            } else {
                $(this).data('toggle', false);
                $(this).find('input[type="checkbox"]').prop('checked', false);
            }

        }
    });
});

我该怎么做，谁能帮帮我。

编辑1：

  1. 在这个小提琴中，用户可以根据选择框值从两个 div 中选中一个复选框。
  2. 复选框计数不应超过选择框值。
  3. 我们还应该考虑“数据最小值”值。

例如，

  • 如果我从选择框中选择了值“4”，那么我只能检查 4 个复选框（总计）
  • 并且来自 div 的复选框应该包含最少的 no('data-min') 复选框，否则我们需要限制用户检查该 div 中的复选框。
4

3 回答 3

2

经过一番努力，终于得到了我的答案

小提琴

jQuery

$(document).ready(function () {
    $('#count').on('change', function () {
        //do stuff here

        //my random "on change" behaviour {
        var chkboxes = $('input[type=checkbox]:checked');
        for (var i = 0; i < chkboxes.length; i++) {
            $(chkboxes[i]).prop('checked', false);
        }
        //end of my random "on change" bahaviour}
    });

    $('input[type=checkbox]').on('change', function (e) {
        //this was deselected no need to check?
        if (!$(this).prop('checked')) {
            return false;
        }

        //checked count exceeded #count value
        if ($('input[type=checkbox]:checked').length > $('#count').val()) {
            $(this).prop('checked', false);
            alert('Count of checked checkboxes >= #count');
            return false;
        }

        //if checked check boxes count = #count, validate all divs
        if ($('input[type=checkbox]:checked').length == $('#count').val()) {
            validateDivs();
        }

        var checksLeft = parseInt($('#count').val()) - $('input[type=checkbox]:checked').length;
        var parent = $($(this).parent()[0]);
        var parentSub = parent.find('input[type=checkbox]:checked').length; //count of checked checkboxes in current parent

        if (parseInt(parent.attr('data-min')) - parentSub > checksLeft) {
            $(this).prop('checked', false);
            alert('Not enought checks left');
            return false;
        }
    });

    $('.checkbox').on('click', function (e) {
        var cnt = $('input[type="checkbox"]:checked').length;
        var cntSel = $('select').val();
        var fin = cntSel - cnt;
        var min = $(this).data('min');

        if (e.target.className == "checkbox") {
            if ($(this).data('toggle') == false) {
                $(this).data('toggle', true);
                if (fin < min) {
                    $(this).prop('checked', false);
                    alert("Minimun capacity of this table is: " + min + ".");
                } else {
                    $(this).find('input[type="checkbox"]:lt(' + fin + ')').prop('checked', true);
                }
            } else {
                $(this).data('toggle', false);
                $(this).find('input[type="checkbox"]').prop('checked', false);
            }

        }
    });
});

function validateDivs() {
    var chkboxes = $('.checkbox');
    for (var i = 0; i < chkboxes.length; i++) {
        var chks = $(chkboxes[i]).find('input[type=checkbox]:checked');
        if (chks.length < $(chkboxes[i]).attr('data-min')) {
            chks.each(function (index, checkbox) {
                $(checkbox).prop('checked', false);
            })
        }
    }
}

谢谢大家，支持我解决这个问题。

于 2013-09-10T08:17:06.437 回答
1

不完整，只是第一个想法http://jsfiddle.net/HNmhL/35/ 注意：$('checkboxId').prop('checked', false) 可能会破坏复选框，不知道如何，但 Pavlo 说这个

$(document).ready(function () {
    $('#count').on('change', function(){
        //do stuff here

        //my random "on change" behaviour {
        var chkboxes = $('input[type=checkbox]:checked');
        for(var i = 0; i < chkboxes.length; i++){
            $(chkboxes[i]).prop('checked', false);
        }
        //end of my random "on change" bahaviour}
    });

    $('input[type=checkbox]').on('change', function(e){
        //this was deselected no need to check?
        if(!$(this).prop('checked')){
            return false;
        }

        //checked count exceeded #count value
        if($('input[type=checkbox]:checked').length > $('#count').val()){
            $(this).prop('checked', false);
            alert('Count of checked checkboxes >= #count');
            return false;
        }

        //if checked check boxes count = #count, validate all divs
        if($('input[type=checkbox]:checked').length == $('#count').val()){
            validateDivs();
        }        

        var checksLeft = parseInt($('#count').val()) - $('input[type=checkbox]:checked').length;
        var parent     = $($(this).parent()[0]);
        var parentSub  = parent.find('input[type=checkbox]:checked').length; //count of checked checkboxes in current parent

        if(parseInt(parent.attr('data-min')) - parentSub > checksLeft){
            $(this).prop('checked', false);
            alert('Not enought checks left');
            return false;
        }
    });
});

function validateDivs(){
    var chkboxes = $('.checkbox');
    for(var i = 0; i < chkboxes.length; i++){
        var chks = $(chkboxes[i]).find('input[type=checkbox]:checked');
        if(chks.length < $(chkboxes[i]).attr('data-min')){
            chks.each(function(index, checkbox){
                $(checkbox).prop('checked', false);
            })
        }
    }
}
于 2013-09-10T06:57:02.867 回答
0

我没有回答你类似的问题吗？？？无论如何，请查看这个小提琴示例。

$('input[type=checkbox]').on('click', function(event){
    if($('div.checkbox input[type=checkbox]:checked').length > $('#count').val())
    {
        event.preventDefault();
    }
});
于 2013-09-10T05:21:40.203 回答