Question

这是之前question

的补充

我在表格中有一堆复选框，我想限制用户根据以下规则检查复选框。

如果用户点击特定行中的任何一个复选框，我们必须以编程方式（jquery）检查下两个复选框，并取消选中（切换）。
会有阻止按钮/复选框，如果用户点击阻止按钮，那么我们必须禁用该行中的所有复选框，但已经检查过。
如果没有可用的下两个复选框（即未选中），我们限制用户选中复选框。这是行中最后一个复选框的规则例外（用户可以检查行中的最后一个复选框）。

我在这里使用1和2规则进行管理，但对于第三条规则，我不知道。

Jquery的

$('.grp:checkbox').change(function () {
    var obj = $(this).parent().nextAll("td").slice(0, 2);
    if ($(this).is(":checked")) {
        //$(this).removeClass('grp');
        obj.find(":checkbox").prop('checked', true);
        obj.find(":checkbox").prop('disabled', true);
    } else {
        obj.find(":checkbox").prop('checked', false);
        obj.find(":checkbox").prop('disabled', false);
    }
});


$('.block').change(function (e) {
    var obj = $(this).parent().nextAll("td");
    if ($(this).is(":checked")) {
        obj.find(":checkbox").prop('checked', true).prop('disabled', true);
    } else {
        obj.find(":checkbox").prop('checked', false).prop('disabled', false);
    }
});

Demo Fiddle

如果有人给我任何建议，对我来说可能会有所帮助。

提前致谢。

Answer 1

最后我得到了答案，在这里，我发布了我的答案，这对我有帮助。

<强> Jquery的

$('.adj :checkbox').change(function () {
    //alert('1');
    var obj = $(this).parent().nextAll("td").slice(0, 2);
    if ($(this).is(":checked") && $(this).hasClass("grp")) {
        //alert('2');
        if (obj.find(".grp:checkbox").hasClass("grp")) {
            var i = $(this).attr("id");
            //alert(i);
            $(this).addClass(i);
            $(this).toggleClass('grp bkd');
            obj.find(".grp:checkbox").prop('checked', true).addClass(i);
            obj.find(".grp:checkbox").prop('disabled', true).toggleClass('grp bkd');
        } else {
            $(this).prop('checked', false);
        }
    } else {
        var id = $(this).attr("id");
        $(this).removeClass(id);
        $(this).toggleClass('grp bkd');
        obj.find("." + id + ":checkbox").prop('checked', false);
        obj.find("." + id + ":checkbox").prop('disabled', false).toggleClass('grp bkd').removeClass(id);
    }
});


$('.block').change(function (e) {
    var obj = $(this).parent().nextAll("td");
    if ($(this).is(":checked")) {
        obj.find(".grp:checkbox").prop('checked', true).prop('disabled', true);
    } else {
        obj.find(".grp:checkbox").prop('checked', false).prop('disabled', false);
    }
});

Working Fiddle

Answer 2

1）创建一个空数组chked 2）使用$.each()

迭代obj以检查是否检查了它

$.each(obj, function (i, j) {

    });

3）推送每次迭代返回的值。

chked.push($(j).find('input')[0].checked);

4）使用$.inArray()，检查是否有任何未经检查的可用

var isAvailable = $.inArray(false, chked);

这会返回-1 2个复选框中的任何一个都有值true，否则为0

最后，

$('.grp:checkbox').change(function () {
    var obj = $(this).parent().nextAll("td").slice(0, 2);
    var chked = [];
    $.each(obj, function (i, j) {
        chked.push($(j).find('input')[0].checked);
    });

    var isAvailable = $.inArray(false, chked);
    console.log(isAvailable);
    if (chked.length != 0 && isAvailable == -1) {
        return false;
    } else {

        if ($(this).is(":checked")) {
            //$(this).removeClass('grp');
            obj.find(":checkbox").prop('checked', true);
            obj.find(":checkbox").prop('disabled', true);
        } else {
            obj.find(":checkbox").prop('checked', false);
            obj.find(":checkbox").prop('disabled', false);
        }
    }
});

限制用户根据我的要求检查复选框

2 个答案:

JSFiddle