document.getElementById(`cb-${opt.key}-${subindex}`).disabled = groupbox.checked
#Checkboxes work as intended, however does not appear as checked.
chrome meteor
seems like this line should be inverted
stoic slate
```js
document.getElementById(`cb-${opt.key}-${subindex}`).disabled = groupbox.c...
Just to be sure, you mean it should be
document.getElementById(`cb-${opt.key}-${subindex}`).enabled = groupbox.checked?
stoic slate
I'm still very new to JS, sorry. Hopefully it works!
stoic slate
seems like this line should be inverted
I thought you meant enabling it originally, can you tell me what you mean by inverting?
chrome meteor
currently, your code looks like it's enabling all the checkboxes when they should be disabled, and disabling all the checkboxes when they should be enabled
stoic slate
I think I inverted it like you said, however it didn't seem to help.
stoic slate
Oh wait no, that's totally my fault. I'm so sorry I gave the unmodified code. However the logic does remain the same I believe. One second.
chrome meteor
it's a little weird that you're manually setting checked when the box is clicked
that's extra complexity
instead of listening to the click event, listen to the change event
the checkbox value naturally changes when it's clicked (or interacted with in other ways, accessibility is important)
stoic slate
Here is the modified code. https://pastecord.com/wolehacofy.typescript
chrome meteor
that looks the same?
this part here
groupbox.addEventListener("click", () => {
opt.sub.forEach((subopt, subindex) => {
document.getElementById(`cb-${opt.key}-${subindex}`).disabled =
groupbox.checked;
if (groupbox.checked) {
document.getElementById(
`cb-${opt.key}-${subindex}`
).checked = false;
} else {
document.getElementById(`cb-${opt.key}-${subindex}`).checked = true;
}
});
});
change it to this:
stoic slate
Oh, I thought there was some modifications but no it is the same. Sorry.
chrome meteor
groupbox.addEventListener("change", () => {
opt.sub.forEach((subopt, subindex) => {
document.getElementById(`cb-${opt.key}-${subindex}`).disabled = !groupbox.checked;
});
});
entirely separate discussion, but use of forEach is generally discouraged since for-of is a better alternative (for now we can focus on getting the code working tho)
stoic slate
It kinda works, but when we press "filter by games" I'm trying to make it so that the other checkboxes in the games filter category becomes unchecked. When it's "filter by games" is unchecked, I want the other boxes to be checked again.
I had a code earlier that did exactly that. It worked as intended, however for some reason the checkboxes would not appear as checked.
chrome meteor
OH thats why thats there
stoic slate
Yes! I can show the previous code if you want, maybe it can help?
chrome meteor
nah i see it
groupbox.addEventListener("change", () => {
opt.sub.forEach((subopt, subindex) => {
document.getElementById(`cb-${opt.key}-${subindex}`).disabled = !groupbox.checked;
});
document.getElementById(`cb-${opt.key}-${subindex}`).checked = !groupbox.checked
});
how does this work
stoic slate
So it should look like this now?:
opt.sub.forEach((subopt, subindex) => {
document.getElementById(`cb-${opt.key}-${subindex}`).disabled =
!groupbox.checked;
});
document.getElementById(`cb-${opt.key}-${subindex}`).checked = !groupbox.checked
});
}
});
});
} else {
optList.insertAdjacentHTML(
"beforeend",
optInsert(opt.name, opt.key, opt.tooltip, opt.checked)
);
}
});
}```I'm still learning about synthaxes and all, so it's messy in this my bad lol.
Think I got it now though, but yeah doing it to that just leaves the checkboxes checked when we press on "filter by games".
chrome meteor
Think I got it now though, but yeah doing it to that just leaves the checkboxes ...
might not be able to edit the checked status when they're disabled?
stoic slate
might not be able to edit the checked status when they're disabled?
Here's an example of what I meant here. With the old code, everything works perfectly. The only issue is that once filter by games is unchecked, the checkboxes in the category looks unchecked. But they are checked, and act like they are.
