How to Target This Sibling CSS via Javascript

Question

How to target via Javascript where the original HTML will have additional .checkmark-disabled class like the desire output.

Original HTML 1

<div>
<input type="checkbox" disabled>
<span class="checkmark">
</div>

Original HTML 2

<div>
<input type="checkbox">
<span class="checkmark">
</div>

Desire Output

<div>
<input type="checkbox" disabled>
<span class="checkmark checkmark-disabled">
</div>

Means it's only target disabled input, then add .checkmark-disabled to span class.

Additional Info: I need to target sibling css not entire div.

Answer 1

You should consider applying styles to sibling element with CSS using :checked and :disabled pseudo-selectors and their compound:

input + .checkmark {}
input:checked + .checkmark {}

input:disabled + .checkmark {}
input:checked:disabled + .checkmark {}

Note that with such approach you will need to overwrite styles applied to the base selector (which is completely OK, but you may be confused). To apply different styles without overwriting you can use :not() pseudo-selector like this:

input:not(:checked) + .checkmark {}

For IE8 and less you can use such syntax:

input[disabled] + .checkmark {}

More information on pseudo-class selectors

Answer 2

Refer to W3School to look for what scenario you want to target. If you are referring to the sibling that right after the targeted element, then you can use the + sign in your css.

input + span Means selects all <span> elements that are placed immediately after <input> elements

To make it more advance, which based on the input status to change the sibling style, you can add:checked or :disabled in your input + span css.

input:disabled + span Means selects all <span> elements that are placed immediately after <input disabled> elements.

There are more way to do the CSS selector but better refer to the W3School.

If you want to use javascript or jquery to do the DOM, then you have to be more specific and provide the code you are using but failed to work.