根据我的要求限制用户选中复选框
restricting user to check checkboxes based on my requirement
这是对上一个问题的补充
我在一个表中有一堆复选框,我想根据以下规则限制用户选中这些复选框。
- 如果用户单击特定行中的任何一个复选框,则我们必须以程序方式选中接下来的两个复选框(jquery)和取消选中(toggle)
- 会有阻止按钮/复选框,如果用户单击阻止按钮,那么我们必须禁用该行中的所有复选框,除非已经选中
- 如果没有接下来的两个复选框可用(即未选中),我们将限制用户选中复选框。这是行中最后一个复选框的规则例外(用户可以选中行中最后的复选框)
在这里,我已经用了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
相关文章:
- 使用Angular存储用户以前是否选中过复选框,然后再调用它的最佳方式是什么
- 如何创建只允许用户在选中前一个复选框的情况下选择复选框的复选框验证
- 如何在将鼠标悬停在提交/锚点上时检查复选框是否已选中,并显示提示用户这样做的警报
- 如果用户未选中复选框或选择按钮,如何为复选框或单选按钮设置一些默认值
- 如何根据用户选择动态更改多个复选框的编号
- 根据用户复选框选择显示或隐藏下拉框
- 如果所有复选框都未选中,则警告用户
- 根据我的要求限制用户选中复选框
- Javascript复选框验证:如果用户没有't选中特定复选框
- 如何在js中签入用户已选中Google验证码中的复选框
- 当用户检索表单时返回选中的复选框(Coldfusion)
- 允许用户只选择一个复选框(引导复选框-x)
- 根据文本字段中的用户输入隐藏/显示复选框
- 基于各种用户行为管理复选框状态
- Javascript + PHP - 当用户选择要上传的文件时如何选中复选框
- 用户单击多个复选框时的 Jqgrid 警报消息
- 如何使用jQuery/Javascript检查用户是否从一组复选框中选中了至少一个复选框
- 当用户选中复选框列表中的复选框之一时,我们如何禁用复选框
- 用户单击输入类型复选框时的条件检查
- 通过jquery删除多个用户复选框