Semanitc UI with ASP.NET MVC Checkbox

Question

I'm trying to use the semantic UI checkbox in an MVC application, however, I've noticed that when using CheckBoxFor() it creates 2 inputs, one of which is hidden:

<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>

Then I activate the checkbox like so:

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

When I then click the checkbox, the "tick" animation doesnt show if the checkbox is ticked, although the value of true IS being set. Is there a way I can tell semantic UI checkbox method to target the non-hidden element?

Answer 1

You can set css to show the tick/checked effect.

.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;
}