MVC中的默认CSS3复选框模板

Question

我一直试图获得为我的布尔编辑器编写的默认复选框模板,并且由于MVC Razor如何为单个布尔模型属性呈现多个输入元素,我遇到了一个问题.

我定义了这个模板:

@model Boolean?
<div class="check-box">
    @Html.CheckBox("", Model.HasValue && Model.Value)
    @Html.LabelForWithoutText(m => m, new object())
</div>

如果我手动写出HTML,如:

<div class="check-box">
    <input type="checkbox" title="Create?" value="true" name="check" id="chkCreate">
    <label title="Create?" for="chkCreate"></label>
</div>

一切正常.

但是当Razor在模型的布尔属性上呈现我的模板时,html是相当不同的.由于MVC如何呈现其他隐藏的输入以将布尔值发布回动作方法.

剃刀版本看起来像这样:

<div class="check-box">
    <input type="checkbox" value="true" name="GloballyShare" id="GloballyShare" data-val-required="The GloballyShare field is required." data-val="true">
    <input type="hidden" value="false" name="GloballyShare">
    <label title="GloballyShare" for="GloballyShare"></label>
</div>

问题是额外的隐藏input.我不想改变这种行为,因为这将全局影响默认情况下MVC表单的工作方式,我想不出在CSS中处理这种情况的方法.

所以我想知道如何实现这一目标.您可以在此处查看问题的实际示例:

MVC中的默认CSS3复选框模板

如果您尝试它然后删除隐藏的输入元素并再次尝试它最顶部的复选框开始工作与底部复选框相同

Answer 1

我刚刚设法修复了jsFiddle.

我将标签选择器从a更改+为a ~,两个复选框现在都在工作:

.check-box input[type=checkbox]:checked + label {

变成:

.check-box input[type=checkbox]:checked ~ label {

修正了jsFiddle