Question

我创建了一个复选框和复选框的标签，我使用html helper来执行此操作：

 @Html.CheckBoxFor(m=>m[i].checkExport)
 @Html.LabelFor(m=>m[i].checkExport)

要修改标签，我在CSS文件中写道：

input[type="checkbox"] + label {    
    background: url('images/delete.png') no-repeat;
    height:17px;
}

input[type="checkbox"]:checked + label {    
    background: url('images/delete.png') no-repeat;
    height:17px;
}

以下是自动生成的代码：

<input data-val="true" data-val-required="The checkExport field is required." name="[0].checkExport" type="checkbox" value="true">
<input name="[0].checkExport" type="hidden" value="false">
<label for="">checkExport</label>

这里有三个问题：

CSS不会影响标签（不要更改背景）
标签的标签不指向复选框，因为它无法定义复选框的ID
1. 标签无法点击

Answer 1

解决每个问题

CSS不会影响标签（不要更改背景）

如果您检查生成的html，您会看到CheckBoxFor()助手生成2个输入，<input type="checkbox" ..>后跟<input type="hidden" ..>，最后是<label>元素。你的css选择器（input[type="checkbox"] + label）试图在input[type="checkbox"]之后立即找到一个标签元素，因为中间的隐藏输入而不存在。一种选择是使用Following-sibling combinator

<div>
    @Html.CheckBoxFor(m => m[i].checkExport)
    @Html.LabelFor(m => m[i].checkExport)
</div>

input[type="checkbox"] ~ label {
    ....
}

Refer fiddle

标签的标签不指向复选框，因为它无法定义（原文如此）复选框的ID

这是符合之前的html规范的html助手的不幸副作用。

html帮助器从属性名称生成id属性，但为了避免与jQuery冲突，请使用下划线替换任何.，[和]个字符（_）。在您的情况下，[0].checkExport将成为_0__checkExport。

但是在HTML 4中，id属性需要以字母开头，因此这将是无效标记，因此html帮助程序只是从生成的标记中省略了该属性。您可以查看source code here，相关的代码部分是

if (!Html401IdUtil.IsLetter(firstChar))
{
    // the first character must be a letter
    return null;
}

标签无法点击

这与第2点有关，因为没有为复选框生成id属性，因此label元素没有指向相关复选框的有效for属性。< / p>

解决此问题的一种方法是使用包含集合属性的视图模型，例如

public class MyViewModel
{
    public List<myModel> MyCollection { get; set; }
}

并在视图中

@model yourAssembly.MyViewModel
....
for (int i= 0; i < Model.MyCollection.Count; i++)
{
    @Html.CheckBoxFor(m => m.MyCollection[i].checkExport)
    @Html.LabelFor(m => m.MyCollection[i].checkExport)

现在，您的输入将使用id属性生成，标签将包含与该复选框相关联的关联for属性，因此可“点击”。

<input type="checkbox" id="MyCollection_0__checkExport" name="MyCollection[i].checkExport" ../>
...
<label for="MyCollection_0__checkExport">checkExport</label>

Answer 2

你的HTML代码：

<input data-val="true" data-val-required="The checkExport field is required." name="[0].checkExport" type="checkbox" value="true">    
<input name="[0].checkExport" type="hidden" value="false">
<label for="">checkExport</label>

输入[type =“checkbox”] +标签不起作用，因为你的标签不在复选框后面，它在输入后面[type =“hidden”]，所以，你需要将css更改为下面：

input[type="hidden"] + label {    
    background: url('images/delete.png') no-repeat;
    height:17px;
}

jsfiddle：http://jsfiddle.net/zhouxiaoping/rsq5e4qs/

Html帮助器标签不显示id

2 个答案: