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

restricting user to check checkboxes based on my requirement

本文关键字：用户 复选框 我的      更新时间：2024-05-03

这是对上一个问题的补充

我在一个表中有一堆复选框，我想根据以下规则限制用户选中这些复选框。

  1. 如果用户单击特定行中的任何一个复选框，则我们必须以程序方式选中接下来的两个复选框（jquery）和取消选中（toggle）
  2. 会有阻止按钮/复选框，如果用户单击阻止按钮，那么我们必须禁用该行中的所有复选框，除非已经选中
  3. 如果没有接下来的两个复选框可用（即未选中），我们将限制用户选中复选框。这是行中最后一个复选框的规则例外（用户可以选中行中最后的复选框）

在这里，我已经用了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);
    }
});

演示Fiddle

如果有人给我任何建议，可能对我完全有帮助。

提前谢谢。

我终于得到了答案，我在这里发布我的答案，这对某人很有帮助。

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);
    }
});

工作Fiddle

1）创建一个空数组chked
2） 使用$.each() 迭代对象以检查是否已检查

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

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

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

4） 使用$.inArray()检查任何未检查的可用

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

如果2个复选框中的任何一个具有值true，则返回-1，否则返回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);
        }
    }
});

JSFiddle

相关文章：