Html MVC4中的样式复选框

我想知道是否有人能给我一些建议

我有四个复选框是用css设计的。这是直接的HTML

    <div class="checkbox checkbox-danger">
        <input id="showInDirectory" name="showInDirectory" type="checkbox" class="styled">
        <label for="showInDirectory">
            Show in directory?
        </label>
    </div>

我根据数据库中保存的值设置真/假值

因此，在我看来，我已经进入：

    <div class="checkbox checkbox-danger">
        @Html.CheckBoxFor(x => x.showInDirectory, new { id = Html.NameFor(x => x.showInDirectory) })
        <label for="@Html.NameFor(x => x.showInDirectory)">Show in Directory</label>
    </div>

@CheckBoxFor（x=>x.showInDirectory，新的{id=Html.NameFor（x=>x.showInDirectory）}）
在目录中显示

在渲染时，会给出：

该值始终为false且不可选择。生成的实际HTML为：

<div class="checkbox checkbox-danger">
<input checked="checked" data-val="true" data-val-required="The showInDirectory field is required." id="showInDirectory" name="showInDirectory" type="checkbox" value="true">
<input name="showInDirectory" type="hidden" value="false">
<label for="showInDirectory">Show in Directory</label>
</div>

在目录中显示

我认为这与正在创建的隐藏输入有关，但我就是不知道如何修复

有人能给我一些建议吗

谢谢，

---

Craig

看起来您正在使用awesome-bootstrap-checkbox.css（已找到）

我以前在Html助手中使用过它，它确实是导致问题的隐藏复选框。样式表使用选择器，要求复选框及其标签并排，但html帮助程序在它们之间放置隐藏的输入

要使css与Html.CheckboxFor兼容，您需要从以下位置更新样式表：

.checkbox input[type=checkbox]:checked + label:after {
    font-family: 'Glyphicons Halflings';
    content: "\e013";
}

.checkbox-danger input[type="checkbox"]:checked + label::before, 
.checkbox-danger input[type="radio"]:checked + label::before {
    background-color: #d9534f;
    border-color: #d9534f;
}

为此：

.checkbox input[type=checkbox]:checked + input[type="hidden"] + label:after,
.checkbox input[type=checkbox]:checked + label:after {
    font-family: 'Glyphicons Halflings';
    content: "\e013";
} 

.checkbox-danger input[type="checkbox"]:checked + input[type="hidden"] + label::before,
.checkbox-danger input[type="checkbox"]:checked + label::before, 
.checkbox-danger input[type="radio"]:checked + label::before {
      background-color: #d9534f;
      border-color: #d9534f;
}

---

新代码解释了额外的隐藏元素。您必须在复选框及其标签之间使用“+”选择器的任何地方进行此更改，但这两项更改是使示例代码正常工作的最低要求。

看起来您正在使用awesome-bootstrap-checkbox.css（已找到）

我以前在Html助手中使用过它，它确实是导致问题的隐藏复选框。样式表使用选择器，要求复选框及其标签并排，但html帮助程序在它们之间放置隐藏的输入

要使css与Html.CheckboxFor兼容，您需要从以下位置更新样式表：

.checkbox input[type=checkbox]:checked + label:after {
    font-family: 'Glyphicons Halflings';
    content: "\e013";
}

.checkbox-danger input[type="checkbox"]:checked + label::before, 
.checkbox-danger input[type="radio"]:checked + label::before {
    background-color: #d9534f;
    border-color: #d9534f;
}

为此：

.checkbox input[type=checkbox]:checked + input[type="hidden"] + label:after,
.checkbox input[type=checkbox]:checked + label:after {
    font-family: 'Glyphicons Halflings';
    content: "\e013";
} 

.checkbox-danger input[type="checkbox"]:checked + input[type="hidden"] + label::before,
.checkbox-danger input[type="checkbox"]:checked + label::before, 
.checkbox-danger input[type="radio"]:checked + label::before {
      background-color: #d9534f;
      border-color: #d9534f;
}

新代码解释了额外的隐藏元素。您必须在复选框及其标签之间使用“+”选择器的任何地方进行此更改，但这两项更改是使示例代码正常工作的最低要求。

可能重复的