Please attached GIF below to see what I’m experiencing. I have a method called “showHideEditable” in which I check whether the event.currentTarget is checked or not…and based on that, I show and hide the appropriate editableElements. If the event.currentTarget has data-id === '0' then all editableElements are either ‘shown’ or ‘hidden’ from the end-user; otherwise, editableElements having the same data-id as of the clicked checkbox are ‘shown’ or ‘hidden’. I am not sure how the individual checkboxes are holding onto their state?
Nevermind, I resolved my issue. Here’s what the problem was. To set and unset the checked attribute on the checkboxes, I was using the following code:
/** check all the checkboxes **/ this.itemCheckboxTargets.forEach((c) => c.setAttribute('checked', true)); /** uncheck all the checkboxes **/ this.itemCheckboxTargets.forEach((c) => c.removeAttribute('checked'));
I simply changed the set/unset syntax to the following and now everything works as expected:
/** check all the checkboxes **/ this.itemCheckboxTargets.forEach((c) => c.checked = true); /** uncheck all the checkboxes **/ this.itemCheckboxTargets.forEach((c) => c.checked = false);
