代码之家 › 专栏 › 技术社区 › Ken-F

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

checkbox razor asp.net-mvc jquery javascript

Ken-F · 技术社区 · 8 年前

我是一个新手,所以请在这里容忍我。我正在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>

现在,这似乎可以无缝地工作:当我选中“fake”复选框时,脚本将确保选中“real”复选框(#LoginMemberMefield)。相反,当取消选中“假”复选框时,它会更新“真”复选框。 然后它就破裂了: 再次重新选择复选框时,“真实”复选框不会更新。我似乎不知道为什么。提前感谢您的帮助!

更新时间: 我自定义复选框样式的方法是隐藏真实的复选框(LoginMemberMeField),利用标签(LoginMemberMecheckBox)设置复选框样式,将其放置在绑定的虚拟复选框(LoginMemberMecheckBox Helper)的顶部。因此,当我单击标签(显示一个复选框)时,会选中虚拟复选框(LoginMemberMecheckboxHelper)。到目前为止,每件事都能完美地工作无数次。现在,脚本应该扩展隐藏的实数(LoginMemberMeField)复选框上的逻辑,以便在表单提交时将正确的值提交给DB。最后一项不起作用,但选中/取消选中真实复选框(LoginMemberMefield),但只选中一次,之后就不再起作用了。

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

当然,我不得不做一些修改,但我尽了最大努力来保留这些基本要素(我想这就是为什么它最初会起作用……)

1 回复 | 直到 8 年前

Ken-F 8 年前

StephenMuecke解决了这个问题。。将脚本更改为以下内容,现在它工作得非常好!

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