MVC Razor 自定义复选框更新“真实”复选框

Question

我是新手，所以在这里请多多包涵。我正在处理 MVC 中的表单并希望有一个自定义复选框。我找到了让它按照我想要的方式工作的方法：

• 隐藏表单复选框
• 继续使用复选框的标签来显示其用途
• 插入 html 标签并结合脚本输入以获取复选框值中继

我的观点的相关部分如下：

<div id="loginRememberMeArea" class="formCheckBoxArea col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-3 col-md-6 col-lg-offset-3 col-lg-6">
    @Html.CheckBoxFor(m => m.RememberMe, new { @id = "loginRememberMeField", @class = "formCheckBoxField" })
    <input id="loginRememberMeCheckBoxHelper" class="formCheckBoxHelper" type="checkbox" value="checkbox1" name="" />
    <label id="loginRememberMeCheckBox" class="formCheckBox" for="loginRememberMeCheckBoxHelper"></label>
    @Html.LabelFor(m => m.RememberMe, new { @id = "loginRememberMeLabel", @class = "formCheckBoxLabel" })
</div>

我正在使用这个脚本来做“魔术”：

<script>
    $(document).ready(function () {
        $("input[type='checkbox']").bind('click', function () {
            var $t = $(this),
                val = $t.val(),
                key = val.charAt(val.length - 1);
            if ($t.val() == 'checkbox'+key && $t.is(':checked')) {
                $("#loginRememberMeField").attr('checked', true);
            }
            else {
                $("#loginRememberMeField").attr('checked', false);
            }
        });
    });
</script>

现在，这似乎可以无缝运行：当我选中“假”复选框时，脚本也会确保选中“真实”复选框 (#loginRememberMeField)。它也以相反的方式工作，当取消选中“假”复选框时，它会更新“真实”复选框。 然后它就坏了：第二次重新选择复选框时，“真实”复选框不会更新。我似乎无法找出原因。提前感谢您的帮助！

更新： 我为自定义复选框样式所做的是隐藏了真正的复选框 (loginRememberMeField)，利用标签 (loginRememberMeCheckBox) 设置复选框的样式，将其放置在绑定的虚拟复选框 (loginRememberMeCheckBoxHelper) 的顶部。因此，当我单击标签（显示一个复选框）时，虚拟复选框（loginRememberMeCheckBoxHelper）被选中。到目前为止，一切都完美无缺地运行了无数次。现在脚本应该扩展隐藏的真实（loginRememberMeField）复选框上的逻辑，以便在表单提交时将正确的值提交给数据库。这最后一块不起作用，但检查/取消选中真正的复选框（loginRememberMeField）但是有一次，之后它就不再起作用了。

Here's a link of where I got this from and where it apparently is working for an infinite number of times

当然，我必须进行一些修改，但我尽了最大努力来保留必需品（我猜这为什么它最初可以工作......）

Answer 1

StephenMuecke 解决了它.. 将脚本更改为以下内容，现在它可以正常工作了！

<script>
    $('.formCheckBoxHelper').click(function () {
        var isChecked = $(this).is(':checked');
        $(this).closest('.container').find('.formCheckBoxField').prop('checked', isChecked)
    })
</script>