Question

我在我的MVC 4 Web应用程序中使用Bootstrap主题。我的应用程序中有一个复选框。

我的剃刀代码如下。

<div class="form-group">
     <div class="checkbox">
           <label>
                @Html.CheckBoxFor(model => model.NeedsRepacking)Needs Repacking
           </label>
     </div>
</div>

但Web浏览器中没有复选框渲染。请查看呈现的代码。

<div class="form-group">
     <div class="checkbox">
        <label class="">
             <div class="icheckbox_minimal-blue" style="position: relative;"><input data-val="true" data-val-required="The NeedsRepacking field is required." id="NeedsRepacking" name="NeedsRepacking" type="checkbox" value="true" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins></div><input name="NeedsRepacking" type="hidden" value="false">Needs Repacking
         </label>
     </div>
</div>

当我选中复选框时，div类更改为icheckbox_minimal-blue checked。

 <div class="form-group">
     <div class="checkbox">
        <label class="">
             <div class="icheckbox_minimal-blue checked" style="position: relative;"><input data-val="true" data-val-required="The NeedsRepacking field is required." id="NeedsRepacking" name="NeedsRepacking" type="checkbox" value="true" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins></div><input name="NeedsRepacking" type="hidden" value="false">Needs Repacking
         </label>
     </div>
</div>

但我无法获得复选框的已检查状态。

Answer 1

这是我正在处理的项目的复制/粘贴/修改，并且与iCheck库存在相同的问题。此解决方案未经过100％测试，因此您需要将其修改为您的代码：

<script type="text/javascript">
    $(document).ready(function () {

        $(".checkbox > .icheckbox_minimal-blue > .iCheck-helper").click(function (e) {
            var id = e.toElement.parentNode.firstChild.id;

            var isChecked = $('#' + id).is(':checked');
            if (isChecked)
            {
                alert('Checked!');
            }
    });
</script>

N.B。这段代码可以而且应该重新考虑和优化。

无法在iCheck-helper复选框中获取检查状态

1 个答案: