3

我一直在尝试为我的布尔编辑器编写默认复选框模板，但由于 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 如何呈现其他隐藏输入以将布尔值发布回操作方法。

Razor 版本如下所示：

<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 复选框模板

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

4

1 回答 1

7

我刚刚设法修复了 jsFiddle。

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

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

变成：

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

修复了 jsFiddle

于 2013-08-21T22:25:59.903 回答