带有 ASP.NET MVC 复选框的语义 UI

Question

我正在尝试在 MVC 应用程序中使用语义 UI 复选框，但是，我注意到在使用 CheckBoxFor() 时它会创建 2 个输入，其中一个是隐藏的：

<div class="field">
    <div class="ui checkbox">
        <input data-val="true" id="OilStarvation" name="OilStarvation" type="checkbox" value="true">
        <input name="OilStarvation" type="hidden" value="false">
        <label for="OilStarvation">Oil Starvation</label>
    </div>
</div>

然后我像这样激活复选框：

$('.ui.checkbox').checkbox();

当我然后单击复选框时，“勾选”动画不会显示复选框是否已勾选，尽管 true 的值已设置。有没有办法告诉语义 UI 复选框方法以非隐藏元素为目标？

Answer 1

您可以设置 css 以显示刻度/选中效果。

.ui.checkbox input:checked ~ .box:after,
.ui.checkbox input:checked ~ label:after
{
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
}