jquery - 如何使用 Jquery 动态更改 HTML.CheckBoxFor

Question

大家好，我有一个问题，我有 3 行用户，每行有 5 个复选框(Html.CheckBoxFor)，这些复选框用于为这些用户分配权限。我的问题是，当第 1 行的 CheckBox 2 未选中时 CheckBox第 1 行的 1 也应该取消选中。但这并没有发生，不是仅取消选中第 1 行，而是取消选中复选框 1 的整个列。这是我的 Jquery 函数。

function setRights() {
var personalReport = document.getElementById("personalReports");
alert(personalReport.value);
personalReport.addEventListener('change', function () {
    if (personalReport.value) {
        $($("form #viewAllReports").attr('checked', false));
    }
    else {
    }
});
} 

“personalReports”和#viewAllReports“是我给我的 Html.CheckboxFor(s) 的 Id。这确实有效，但也不是以我想要的方式，我想我在这里要求的是一种唯一标识所有这些行的方法，我可以在 jquery 中指定它以获得将影响的所需结果只是我忙着的那一排。提前致谢。

这是我的 View 代码:

    <div class="chkbox">                            
        @Html.CheckBoxFor(m => m.PersonalReports, new { id = "personalReports", onclick   = "setRights();" })
    </div>
    <div class="chkbox">                            
        @Html.CheckBoxFor(m => m.ViewAllReports, new { id = "viewAllReports"})
    </div>
    <div class="chkbox">                            
        @Html.CheckBoxFor(m => m.EditAI)
    </div>
    <div class="chkbox">                            
        @Html.CheckBoxFor(m => m.ReportBranding)
    </div>
    <div class="chkbox">                            
        @Html.CheckBoxFor(m => m.PersonalizeTheme)
    </div>
    <div class="chkbox">
    @Html.CheckBoxFor(m => m.Search)
    </div>
    <div class="chkbox">
    @Html.CheckBoxFor(m => m.RequestOutOfBundleSearch)
    </div>

Answer 1

当我们使用Html.xxxxxxFor(m => m.property)时，总是有一个问题:jQuery选择器如何获取该元素？

@[gdoron] 所说的部分正确:Html.xxxxxxFor(m => m.property) 使用 id 和 name< 构建 HTML 元素 等于属性名称，除非:

1. 属性来自嵌套模型，例如:model.Address.Street
2. 属性是一个数组或集合，例如:model.Order[0]

虽然您的 View 很简单并且没有使用上述任何场景，但为了 jQuery 选择器的缘故，我仍然更喜欢向元素添加 HTML 属性。

以下代码非常适合我:

@Html.CheckBoxFor(m => m.BoolValue1, new { value = "check-box-1" }) Check Box 1 (drives check box 2)
<br />
@Html.CheckBoxFor(m => m.BoolValue1, new { value = "check-box-2" }) Check Box 2


<script type="text/javascript">
    $(function () {
        $('input[value="check-box-1"]').bind('change', function () {
            personalReports_changed();
        });
    });

    function personalReports_changed() {
        if ($('input[value="check-box-1"]').attr('checked'))
            $('input[value="check-box-2"]').attr('checked', true);
        else
            $('input[value="check-box-2"]').removeAttr('checked');
    }
</script>