Javascript 使用父类复选框时,如何使子类复选框更改状态?
当试图禁用子类并取消选中父类时,我的脚本有问题。它目前没有在页面上看到的更改。 我还试图让子类同时相互引用,如果前一个未选中,我希望下面的类被选中并禁用。如果选中,则启用下一个选项,但在选中下一个选项之前,将禁用该选项中的以下选项。 最后,我尝试在页面完全加载后以及选中复选框时运行此脚本。 这是处理插件中的嵌套表,但表的每个部分都在外部表和内部表上设置了类。 任何人看到能帮我做这件事都将不胜感激。我在处理JavaScript时有些不知所措 我目前有测试数据的页面加载,我目前引入了验证错误。虽然它不是我认为应该如何运作的。 目前,我有三个职能部门正在共同努力,以取得成果。我可以在调试期间单步执行代码,它将执行所有三个函数,但页面本身没有显示任何更改。 所有数据都从数据库中提取,并通过C#以HTML格式输出。js脚本包含的功能不止这三个,我已经禁用了我不需要的功能,以便在测试中获得站点功能。 如果我不得不猜测我的代码是错的,但我无法确定代码中哪里有错误。 正在完成的完整工作可以在JSFIDLE上看到: 以下是此功能的前两个功能:Javascript 使用父类复选框时,如何使子类复选框更改状态?,javascript,jquery,Javascript,Jquery,当试图禁用子类并取消选中父类时,我的脚本有问题。它目前没有在页面上看到的更改。 我还试图让子类同时相互引用,如果前一个未选中,我希望下面的类被选中并禁用。如果选中,则启用下一个选项,但在选中下一个选项之前,将禁用该选项中的以下选项。 最后,我尝试在页面完全加载后以及选中复选框时运行此脚本。 这是处理插件中的嵌套表,但表的每个部分都在外部表和内部表上设置了类。 任何人看到能帮我做这件事都将不胜感激。我在处理JavaScript时有些不知所措 我目前有测试数据的页面加载,我目前引入了验证错误。虽然它
function changefc(e) {
e.checked = false;
console.log(e);
return e;
}
function changefd(evt) {
evt.disabled = true;
console.log(evt);
return evt;
}
上面的函数在下面的函数中调用,我将变量传递给它们以更改变量的状态。以下是在网页中使用的代码:
console.log("beforeBind");
$(".cbFS").on('click', updateDisabledState);
function updateDisabledState() {
console.log("on update")
//This is to set the grid to the correct settings on load.
//Get the elements of the main grid.
var qSelAll = [].slice.call(document.querySelector('.MainGrid').children);
for (var a = 0; a < qSelAll.length; a++) {
//Check the factions grid
var gridFac = $('.factionGrid');
for (var b = 0; b < gridFac.length; b++) {
//Check if the Faction is set. If it is set then allow the data to be processed.
//If it is not set then set all the Reputations Levels to false and disable them.
var gridFS = [].slice.call(gridFac[b].querySelectorAll('.cbFS'));
var repGrid = [].slice.call(gridFac[b].querySelectorAll('.repLevelGrid .cbRS'));
for (var c = 0; c < gridFS.length; c++) {
console.log(c);
console.log(gridFS[c]);
var fieldFS = gridFS[c].checked;
if (fieldFS === false) {
for (var d = 0; d < repGrid.lengrh; d++) {
console.log(d);
console.log(repGrid[d]);
var fieldRSc = repGrid[d].checked;
var fieldRSd = repGrid[d].disabled;
changefc(fieldRSc);
changefd(fieldRSd);
console.log(fieldRSc);
console.log(fieldRSd);
}
} else {
continue;
}
}
}
}
}
console.log(“beforeBind”);
美元(“.cbFS”)。在('click',updateDisableState');
函数updateDisabledState(){
控制台日志(“更新时”)
//这是为了在加载时将栅格设置为正确的设置。
//获取主栅格的元素。
var qseall=[].slice.call(document.querySelector('.MainGrid').children);
对于(var a=0;a
我从这里得到的是页面上什么也没有发生。当我取消选中名称后面的外部复选框时,表中的内部复选框不会改变状态。在未选中外部复选框的情况下,表“行”上的所有内部复选框都应取消选中并禁用。如果在加载时或通过选择选中外部复选框,则内部复选框应相互检查,以确定是否应选中它们。从顶部的内部表格中可以看出,所有内容都应该取消选中并禁用。不是,第一个复选框未选中,接下来三个复选框已选中,最后两个复选框未选中,但它们仍然全部启用。
在底部的内部表格中,最后一个复选框被选中,但上一个复选框被取消选中,因此最后一个复选框应该被取消选中和禁用。最简单的方法是将一个类添加到选中主复选框时希望默认选中的复选框中 下面的jquery将搜索父
tr
(表行)中的任何复选框,然后对其执行操作。您已经为主复选框添加了类.cbFS
,因此我将其用作它们的标识符,然后将您现有的类.cbRS
用于关联的复选框
我添加了一个新类。默认选中了相关的复选框,默认情况下应该选中这些复选框
这是在自定义函数中完成的,因此可以在主复选框值更改后以及文档准备就绪后运行该函数
Erik Phillips是正确的,但是每个元素的HTMLid
都应该是唯一的,否则以后会遇到麻烦。
如果这不是你需要的,请告诉我
//文档准备好后运行
$(文档).ready(函数(){
//循环检查每个主复选框
$(“.cbFS”)。每个(函数(){
//检查是否选中,然后运行自定义函数
如果(选中此项){
复选框($(此),“”);
}否则{
复选框($(此),“已禁用”);
}
});
});
//为class.cbFS复选框的任何更改添加事件,如上所述,检查是否选中,然后运行自定义函数
$(“.cbFS”).change(函数(){
如果(选中此项){
复选框($(此),“”);
}否则{
复选框($(此),“已禁用”);
}
});
功能复选框(主,