CODEWITHSUNDEEP
htmlcsscheckbox
Rafaelo
Rafaelo

Reputation: 11

Checkbox not firing

Here is my code: http://jsfiddle.net/raficsaza/mgukxouj/

The problem is I cannot use the checkbox, it's stuck on false value and not moving at all. Can I go through the "input" tag, because I cannot remove it...

<div class="toggler">
        <input class="toggler-checkbox" data-val="true" data-val-required="The isOK field is required." id="isOK" name="isOK" type="checkbox" value="true" /><input name="isOK" type="hidden" value="false" />
        <label class="toggler-label" for="mytoggler">
            <span class="toggler-inner"></span>
            <span class="toggler-switch"></span>
        </label>
            </div>

Upvotes: 1

Views: 81

Answers (1)

AlliterativeAlice
AlliterativeAlice

Reputation: 12587

The adjacent sibling selector isn't working because you have a hidden input after the checkbox and before the label. Change your HTML to move it to before like so:

<input name="isOK" type="hidden" value="false" />
<input class="toggler-checkbox" data-val="true" data-val-required="The isOK field is required." id="isOK" name="isOK" type="checkbox" checked />

As an aside, you shouldn't use the same name attribute for both the checkbox and hidden input. You should also use the checked attribute rather than value="true" if you want the checkbox to be checked by default.

Second, your label isn't pointing to your checkbox, you need to change the for attribute to match the checkbox's ID:

<label class="toggler-label" for="isOK">

If you can't move/delete the hidden input, you can still get to the label by changing your CSS:

.toggler-checkbox:checked + input + .toggler-label .toggler-inner {
    margin-left: 0;
}
.toggler-checkbox:checked + input + .toggler-label .toggler-switch {
    right: 0px; 
}

Working fiddle

Upvotes: 1

Related Questions