Question

这是我的代码： http://jsfiddle.net/raficsaza/mgukxouj/

问题是我无法使用复选框，它被卡在假值上而根本没有移动。我可以浏览“输入”标签，因为我无法删除它......

<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>

Answer 1

相邻的兄弟选择器不起作用，因为在复选框之后和标签之前有一个隐藏的输入。更改HTML以将其移至之前：

<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 />

另外，您不应对复选框和隐藏输入使用相同的name属性。如果您希望默认选中复选框，则还应使用checked属性而不是value="true"。

其次，您的标签没有指向您的复选框，您需要更改for属性以匹配复选框的ID：

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

如果您无法移动/删除隐藏的输入，您仍然可以通过更改CSS来获取标签：

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

Working fiddle

复选框没有开火

1 个答案: