我正在尝试启用这些复选框:
进入这些复选框(我将这些称为CheckButtons):
正下方是当前复选框的代码:
@foreach (var department in Model.Select(u => new { u.DepartmentId, u.DepartmentName }).Distinct().ToDictionary(u => u.DepartmentId, u => u.DepartmentName).OrderBy(u => u.Value))
{
i++;
<text> </text>
@department.Value <input name="department_chkbox" type="checkbox" value="@department.Key" />
if (i > 5)
{
<text><br></text>
i = 0;
}
}
下面是所需的 HTML,但它并没有告诉我太多信息:
<td id="checkboxcontainer">
<input type="checkbox" name="statusId" value="1" id="ckActive" checked="checked" /><label for="ckActive">Active</label>
<input type="checkbox" name="statusId" value="2" id="ckLeave" /><label for="ckLeave">Leave</label>
<input type="checkbox" name="statusId" value="3" id="ckSusp" /><label for="ckSusp">Suspended</label>
<input type="checkbox" name="statusId" value="4" id="ckTerm" /><label for="ckTerm">Terminated</label>
</td>
有谁知道让复选框变成“复选框”的调用是什么?我编写了复选框代码,但我无权访问复选框代码。我假设这是在 eitehr Javascript 或 Jquery 中完成的。也没有
类最佳答案
离开所需的 HTML,这是仅使用 CSS 的相对简单的解决方案。当然,您需要对其进行调整以使其看起来完全符合您的要求。
#checkboxcontainer {
display: flex;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox] + label {
display: block;
min-width: 100px;
border: solid #999;
border-width: 1px 1px 1px 0;
background: #eee;
margin: 0;
padding: 2px 0;
text-align: center;
}
input[type=checkbox]:checked + label {
background: #ccc;
}
input[type=checkbox] + label:first-of-type {
border-radius: 3px 0 0 3px;
border-left-width: 1px;
}
input[type=checkbox] + label:last-of-type {
border-radius: 0 3px 3px 0;
}
<div id="checkboxcontainer">
<input type="checkbox" name="statusId" value="1" id="ckActive" checked="checked" /><label for="ckActive">Active</label>
<input type="checkbox" name="statusId" value="2" id="ckLeave" /><label for="ckLeave">Leave</label>
<input type="checkbox" name="statusId" value="3" id="ckSusp" /><label for="ckSusp">Suspended</label>
<input type="checkbox" name="statusId" value="4" id="ckTerm" /><label for="ckTerm">Terminated</label>
</div>
要使用 Razor 生成此 HTML,您需要这样的东西:
<div id="checkboxcontainer">
@foreach (var department in Model.Select(u => new { u.DepartmentId, u.DepartmentName }).Distinct().ToDictionary(u => u.DepartmentId, u => u.DepartmentName).OrderBy(u => u.Value))
{
i++;
<input name="department_chkbox" type="checkbox" value="@department.Key" id="department_chkbox@(i)" /><label for="department_chkbox@(i)">@department.Value</label>
}
</div>
关于javascript - 将 CheckBoxes 变成 CheckButtons,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53858977/