Javascript 禁用字段集无法按预期工作

在我的演示表单中，字段集在按钮选择时按顺序启用。因此，检查第一个字段集中的按钮将启用第二个字段集，依此类推

如果在第一个字段集中未选中所有复选框，则应重置表单，然后应再次禁用第二到第四个字段集。但事实并非如此。第二个字段集以某种方式保持启用状态。这里有什么问题

document.addEventListener（“DOMContentLoaded”），_=>{
const form=document.forms[0]
//首先，禁用除第一个字段集之外的所有字段集
函数disableFieldsets（）{
const disabledFieldsets=form.queryselectoral(
“节：非（：类型的第一个）字段集”
)
for（设i=0；i{
节.addEventListener（“更改”，函数（）{
让nextFieldset=this.nextElementSibling.querySelector（“字段集”）
if（下一个字段集）{
nextFieldset.disabled=false
}
})
})
//取消选择第一个字段集中的所有输入后，重置表单并禁用字段集
const firstFieldsetButtons=form.queryselectoral（“[name=First]”）
让isChecked=false
forEach（firstFieldsetButton=>{
firstFieldsetButton.addEventListener（“单击”，函数（e）{
如果（选中此项）{
isChecked=true
}否则{
表单.重置（）
disableFieldsets（）
}
})
})
})

第一场集
A.
B
C
第二场集
1.1
1.2
1.3
第三场集
2.1
2.2
2.3
第四场集
3.1
3.2
3.3

每次更改第一个字段集时，您都会启用第二个字段集，即使取消选中复选框也是如此。即使在“单击”复选框后禁用字段集，您的

“更改”

事件也会在此事件后运行，从而启用第二个字段集。这可以通过使用标志指示表单是否已重置来解决：

document.addEventListener（“DOMContentLoaded”），_=>{
const form=document.forms[0]；
//首先，禁用除第一个字段集之外的所有字段集
函数disableFieldsets（）{
const disabledFieldsets=form.queryselectoral(
“节：非（：类型的第一个）字段集”
)
for（设i=0；i{
节.addEventListener（“更改”，函数（）{
让nextFieldset=this.nextElementSibling.querySelector（“字段集”）
如果（nextFieldset&&！重置）{
nextFieldset.disabled=false；
}否则如果（重置）{
重置=错误；
}
})
})
//取消选择第一个字段集中的所有输入后，重置表单并禁用字段集
const firstFieldsetButtons=form.queryselectoral（“[name=First]”）
让isChecked=false；
forEach（firstFieldsetButton=>{
firstFieldsetButton.addEventListener（“单击”，函数（e）{
如果（选中此项）{
isChecked=true；
}否则{
form.reset（）；
disableFieldsets（）；
重置=真；
}
})
})
})

第一场集
A.
B
C
第二场集
1.1
1.2
1.3
第三场集
2.1
2.2
2.3
第四场集
3.1
3.2
3.3

每次更改第一个字段集时，您都会启用第二个字段集，即使取消选中复选框也是如此。即使在“单击”复选框后禁用字段集，您的

“更改”

事件也会在此事件后运行，从而启用第二个字段集。这可以通过使用标志指示表单是否已重置来解决：

document.addEventListener（“DOMContentLoaded”），_=>{
const form=document.forms[0]；
//首先，禁用除第一个字段集之外的所有字段集
函数disableFieldsets（）{
const disabledFieldsets=form.queryselectoral(
“节：非（：类型的第一个）字段集”
)
for（设i=0；i{
节.addEventListener（“更改”，函数（）{
让nextFieldset=this.nextElementSibling.querySelector（“字段集”）
如果（nextFieldset&&！重置）{
nextFieldset.disabled=false；
}否则如果（重置）{
重置=错误；
}
})
})
//取消选择第一个字段集中的所有输入后，重置表单并禁用字段集
const firstFieldsetButtons=form.queryselectoral（“[name=First]”）
让isChecked=false；
forEach（firstFieldsetButton=>{
firstFieldsetButton.addEventListener（“单击”，函数（e）{
如果（选中此项）{
isChecked=true；
}否则{
form.reset（）；
disableFieldsets（）；
重置=真；
}
})
})
})

第一场集
A.
B
C
第二场集
1.1
1.2
1.3
第三场集
2.1
2.2
2.3
第四场集
3.1
3.2
3.3

在您的部分的

更改事件中，您可以指定
，而不是将
nextFieldset
指定为禁用状态！通过向函数中添加事件参数来检查event.target: