MVC 4 中的样式复选框

Question

我想知道是否有人可以传递一些建议.....

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

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

这是页面上呈现的内容

我试图在“代码”中复制这个，所以在我的模型中我有

public bool showinDirectory { get; set; }

我根据数据库中为该值保存的内容设置真/假值。

所以在我看来我已经进入：

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

渲染时给出：

该值始终为 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>

我认为这与正在创建的隐藏输入有关，但我不知道如何解决。

有人能给我一些建议吗？

谢谢，克雷格

Answer 1

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

我之前已经将它与 Html Helpers 一起使用，它确实是导致问题的隐藏复选框。样式表使用要求复选框及其标签并排的选择器，但 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;
}

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