html - Checkbox not firing -

here code: http://jsfiddle.net/raficsaza/mgukxouj/

the problem cannot use checkbox, it's stuck on false value , not moving @ all. can go through "input" tag, because cannot remove it...

<div class="toggler">         <input class="toggler-checkbox" data-val="true" data-val-required="the isok field 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> 

the adjacent sibling selector isn't working because have hidden input after checkbox , before label. change html move before so:

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

as aside, shouldn't use same name attribute both checkbox , hidden input. should use checked attribute rather value="true" if want checkbox checked default.

second, label isn't pointing checkbox, need change for attribute match checkbox's id:

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

if can't move/delete hidden input, can still label changing css:

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

working fiddle