取消选中表单中的复选框按钮时出现问题

Question

在我的演示表单中，您可以在下面运行，字段集在按钮选择时按顺序启用。因此，选中第一个字段集中的按钮会启用第二个字段集，依此类推。

如果未选中第一个字段集中的所有复选框，则应重置表单，然后应再次禁用第四个字段集的第二个复选框。

但是，当取消选中第一个字段集中的复选框之一时，也会取消选中第一个字段集中的所有其他复选框按钮，这当然不是它应该的工作方式。

我做错了什么？

---

document.addEventListener("DOMContentLoaded", _ => {
const form = document.forms[0]
// First, disable all fieldsets except the first
function disableFieldsets() {
const disabledFieldsets = form.querySelectorAll(
"section:not(:first-of-type) fieldset"
)
for (let i = 0; i < disabledFieldsets.length; i++) {
disabledFieldsets[i].disabled = true
}
}
disableFieldsets()
// Sequentially enable fieldsets on selection
const sections = form.querySelectorAll("section")
let reset = false

sections.forEach(section => {
section.addEventListener("change", function() {
let nextFieldset = this.nextElementSibling.querySelector("fieldset")
if (nextFieldset && !reset) {
nextFieldset.disabled = false
} else if (reset) {
reset = false
}
})
})
// Reset form and disable fieldsets after all inputs in the first fieldset are deselected
const firstFieldsetButtons = form.querySelectorAll("[name=First]")
let isChecked = false
firstFieldsetButtons.forEach(firstFieldsetButton => {
firstFieldsetButton.addEventListener("click", function(e) {
if (this.checked) {
isChecked = true
} else {
form.reset()
disableFieldsets()
}
})
})
})

<main>
<form method="post" action="">    
<section>
<fieldset>
<legend>First Fieldset</legend>
<label><input type=checkbox name=First value=A>A</label>
<label><input type=checkbox name=First value=B>B</label>
<label><input type=checkbox name=First value=C>C</label>
</fieldset>
</section>

<section>
<fieldset>
<legend>Second Fieldset</legend>
<label><input type=radio name=Second value=1.1>1.1</label>
<label><input type=radio name=Second value=1.2>1.2</label>
<label><input type=radio name=Second value=1.3>1.3</label>
</fieldset>
</section>

<section>
<fieldset>
<legend>Third Fieldset</legend>
<label><input type=radio name=Third value=2.1>2.1</label>
<label><input type=radio name=Third value=2.2>2.2</label>
<label><input type=radio name=Third value=2.3>2.3</label>
</fieldset>
</section>

<section>
<fieldset>
<legend>Fourth Fieldset</legend>
<label><input type=radio name=Fourth value=3.1>3.1</label>
<label><input type=radio name=Fourth value=3.2>3.2</label>
<label><input type=radio name=Fourth value=3.3>3.3</label>
</fieldset>
</section>

<input type=submit value=Submit>
</form>
</main>

Answer 1

再做一个这样的条件：if(this.closest('fieldset').querySelectorAll('input:checked').length > 0) { return;}

片段：

document.addEventListener("DOMContentLoaded", _ => {
const form = document.forms[0]
// First, disable all fieldsets except the first
function disableFieldsets() {
const disabledFieldsets = form.querySelectorAll(
"section:not(:first-of-type) fieldset"
)
for (let i = 0; i < disabledFieldsets.length; i++) {
disabledFieldsets[i].disabled = true
}
}
disableFieldsets()
// Sequentially enable fieldsets on selection
const sections = form.querySelectorAll("section")
let reset = false

sections.forEach(section => {
section.addEventListener("change", function() {
let nextFieldset = this.nextElementSibling.querySelector("fieldset")
if (nextFieldset && !reset) {
nextFieldset.disabled = false
} else if (reset) {
reset = false
}
})
})
// Reset form and disable fieldsets after all inputs in the first fieldset are deselected
const firstFieldsetButtons = form.querySelectorAll("[name=First]")
let isChecked = false
firstFieldsetButtons.forEach(firstFieldsetButton => {
firstFieldsetButton.addEventListener("click", function(e) { 
if(this.closest('fieldset').querySelectorAll('input:checked').length > 0) { return;} 
if (this.checked) {
isChecked = true
}

else {
form.reset()
disableFieldsets()
}
})
})
})

<main>
<form method="post" action="">    
<section>
<fieldset>
<legend>First Fieldset</legend>
<label><input type=checkbox name=First value=A>A</label>
<label><input type=checkbox name=First value=B>B</label>
<label><input type=checkbox name=First value=C>C</label>
</fieldset>
</section>

<section>
<fieldset>
<legend>Second Fieldset</legend>
<label><input type=radio name=Second value=1.1>1.1</label>
<label><input type=radio name=Second value=1.2>1.2</label>
<label><input type=radio name=Second value=1.3>1.3</label>
</fieldset>
</section>

<section>
<fieldset>
<legend>Third Fieldset</legend>
<label><input type=radio name=Third value=2.1>2.1</label>
<label><input type=radio name=Third value=2.2>2.2</label>
<label><input type=radio name=Third value=2.3>2.3</label>
</fieldset>
</section>

<section>
<fieldset>
<legend>Fourth Fieldset</legend>
<label><input type=radio name=Fourth value=3.1>3.1</label>
<label><input type=radio name=Fourth value=3.2>3.2</label>
<label><input type=radio name=Fourth value=3.3>3.3</label>
</fieldset>
</section>

<input type=submit value=Submit>
</form>
</main>