Reputation: 11
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
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;
}
Upvotes: 1