Conditional visibility of a checkbox

I have 2 checkboxlists in my view as follows. In the first checkbox list when user clicks on any of the checkboxes for MgmtArea, a javascript pushes the vale of the selected items into the array. The second checkbox list is about workzones where each workzone has a corresponding MgmtAreaID. How do I display the workzones based on the MgmtAreaID's that were checked in the MgmtArea checkbox list?

<script type="text/javascript">

    $(".chk").click(function () {
        selectedMgmtArea = [];
        $('.chk:checked').each(function () {
            selectedMgmtArea.push($(this).val());
        });

    });
</script>
<div class="container">
                <div class="editor-label">
                    @Html.LabelFor(model => model.MgmtAreaList)
                </div>

                @for (int i = 0; i < Model.MgmtAreaList.Count(); i++)
                {
                    var notif = Model.MgmtAreaList[i];
                    var areaID = Model.MgmtAreaList[i].MgmtAreaID;
                    @Html.CheckBoxFor(u => u.MgmtAreaList[i].IsChecked, new { @class = "chk", value = areaID })
                    @notif.Description
                    @Html.HiddenFor(x => x.MgmtAreaList[i].Description);
                    @Html.HiddenFor(model => model.MgmtAreaList[i].RegionID)
                    <br />
                 }
/div>

 <div class="container">
                    <div class="editor-label">
                        @Html.LabelFor(model => model.WorkZoneList)
                    </div>

                    @for (int i = 0; i < Model.WorkZoneList.Count(); i++)
                    {
                        var notif_1 = Model.WorkZoneList[i];
                        @Html.CheckBoxFor( j => j.WorkZoneList[i].IsChecked)
                        @notif_1.Description
                        @Html.HiddenFor( j => j.WorkZoneList[i].Description)
                        @Html.HiddenFor(j => j.WorkZoneList[i].WorkZoneID)
                         <br />

                    }
</div>