Does anyone have experience working with a table containing checkboxes like the one demonstrated here? I am encountering an issue where toggling the checked property of any input on any row always affects the element in the first row.
Upon further investigation, it seems that the CSS rules
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
are consistently being applied to row-1.
One potential solution could involve adding a rule for each individual row:
#row-1 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner,
#row-2 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner,
#row-3 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner,
#row-4 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner,
#row-5 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner,
#row-6 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {margin-left: 0;}
#row-1 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch,
#row-2 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch,
#row-3 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch,
#row-4 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch,
#row-5 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch,
#row-6 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { right: 0px; }
However, maintaining this approach becomes challenging as the number of rows is not fixed and is determined during run-time.
Any suggestions on how to solve this issue without resorting to individual rules for each row?