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

我根据db中为此值保存的内容设置true / false值。

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

    <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（找到here）

之前我已经将它与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;
}

新代码解释了额外的隐藏元素。你必须在＆＃34; +＆＃34;的所有地方做出这种改变。选择器用在复选框和它的标签之间，但这两个更改是使示例代码工作的最低限度。