JavaScript:选中特定Div id的限制复选框

JavaScript:选中特定Div id的限制复选框,javascript,html,checkbox,Javascript,Html,Checkbox,我需要您的帮助,以了解如何调用同级divs下的input type=checkbox,然后单击大于2则无法调用该复选框 这是密码 $(“#qwrap27491:复选框”)。单击(函数(){ if($(“#qwrap27491:复选框:选中”).length>=3){ $(“#qwrap27491:checkbox:not(:checked)”).attr(“disabled”、“disabled”); 警告(“请仅选择2个案例”); }否则{ $(“#qwrap27491:checkbox”)

我需要您的帮助,以了解如何调用同级divs下的input type=checkbox,然后单击大于2则无法调用该复选框

这是密码

$(“#qwrap27491:复选框”)。单击(函数(){
if($(“#qwrap27491:复选框:选中”).length>=3){
$(“#qwrap27491:checkbox:not(:checked)”).attr(“disabled”、“disabled”);
警告(“请仅选择2个案例”);
}否则{
$(“#qwrap27491:checkbox”).attr(“已禁用”,即“);
}
});

0.1.15检查表
5.
4.
3.
2.
1.

尝试删除
其他部分中的属性,如:

$("#qwrap27491 :checkbox:not(:checked)").removeAttr("disabled");
$(“#qwrap27491:复选框”)。单击(函数(){
if($(“#qwrap27491:复选框:选中”).length>=3){
$(“#qwrap27491:checkbox:not(:checked)”).attr(“disabled”、“disabled”);
警告(“请仅选择2个案例”);
}否则{
$(“#qwrap27491:checkbox:not(:checked)”).removeAttr(“disabled”);
}
});

0.1.15检查表
5.
4.
3.
2.
1.

同一文档中的
id
属性应该是唯一的,请尝试从有效的HTML结构中删除重复项一次

尝试分离主选择器以防止重复,您可以使用
removeAttr()
函数,如:

var checkbox_选择器=“#qwrap27491:checkbox”;
$(复选框\选择器)。单击(函数(){
如果($(复选框\选择器+“:选中”)。长度>=3){
$(复选框+选择器+“:未(:选中)”).attr(“已禁用”、“已禁用”);
警告(“请仅选择2个案例”);
}否则{
$(复选框\选择器).removeAttr(“禁用”);
}
});

0.1.15检查表
5.
4.
3.
2.
1.

作为一个用户,我希望您能阻止我做出无效的选择。我下面的解决方案将在选择最大数量的复选框后立即禁用所有未选中的复选框

const
container=document.getElementById('qwrap27491');
函数onCheckboxChanged(事件){
常数
//获取容器元素内的所有复选框。querySelectorAll
//将返回一个节点列表,将其转换为数组,以便我们可以使用过滤器
//和forEach。
checkbox=Array.from(container.querySelectorAll('input[type=“checkbox”]”)),
//过滤复选框,使我们有一个仅包含选定复选框的数组。
//从这个数组中,我们只想知道它包含多少项。
selectCount=checkbox.filter(checkbox=>checkbox.checked).length;
//遍历所有复选框。
复选框。forEach(复选框=>{
//如果选中该复选框,请跳过它。
如果(复选框。选中){
返回;
}
//当已经存在时,应禁用所有其他复选框
//选中2个复选框。
checkbox.disabled=(selectCount==2);
});
}
//如果我们管理了更改,请向容器元素添加更改侦听器
//从DOM中检索它。每当包含复选框时
//此元素已更改,我们将收到更改事件。
if(容器!==null){
container.addEventListener('change',onCheckboxChanged);
}
标签{
显示器:flex;
}

0.1.15检查表
5.
4.
3.
2.
1.

id在htmltank you@Mamun中必须是唯一的,它在这个论坛上工作,但每次我添加ajax脚本都会破坏HMTL设计。你能帮我吗help@BKChedlia,我们只能根据您在此处发布的代码尝试找到解决方案。如果代码在这里工作,而不是在您的实际环境中,那么问题可能是其他方面……我认为我与新脚本和旧脚本有冲突,不允许删除,每次我放入min.js时,页面HTML都会被破坏,您能提供建议吗?单击
F12
检查浏览器控制台中是否有错误。Hi@Zakaria,浏览器中没有错误,似乎jquery.min.js与现有的jquery-1.8.3.js有冲突,我不允许删除,我添加了jquery.noconflict(),运气不佳。请您提供建议好吗?所以不要添加
jquery.min.js
并进行检查,您不必使用两个版本。不要担心,因为您已经添加了jquery库,所以代码应该可以正常工作。如果代码有任何冲突或错误,它应该显示在浏览器控制台中。。。现在,为了确保您的代码是可访问的,您可以添加一些错误,例如通过
remoaaveattr
替换
removeAttr
,并检查控制台。然后您需要转到DOM两次。一次获取选中的复选框,另一次获取未选中的复选框。您还可以在初始化期间将复选框存储在变量中。这样,您根本不必在更改处理程序中访问DOM。