Abhilash.J.A Ответов: 1

Родительский дочерний список флажков проверяет / снимает флажки с каждой строки.

Я работаю над MVC 5, там у меня есть вид и частичный вид.

@foreach (var item in Model)  
                            {  
                                <div class="js-list list-wrapper list-padding u-fancy-scrollbar">  
                                    <ul class="offered-list">  
  
                                        @if (item.AssociatedObject.idParentCategoryProduct == 0)  
                                        {  
                                            <li>  
                                                <div class="checkbox ">  
                                                    <label class="hd-txt"><input type="checkbox" class="chk_Product" value="@item.AssociatedObject.idProductCategory">  
                                                        <label style="padding:0">@item.AssociatedObject.ProductCategoryNamelabel>  
                                                    label>  
                                                div>  
                                            li>  
                                        }  
                                        <li>  
                                            @Html.Partial("_productOffered", item)  
                                        li>  
                                    ul>  
                                div>  
                            }


И это частичный взгляд,

@model Rebox.BIL.DataModel.ProductsMenuListDM  
  
@foreach (var item in Model.ProductsList)  
{  
    <ul class="offered-sub-list">  
        @if (item != null)  
        {  
            <li>  
                <div class="checkbox ">  
                    <label>  
                        <input type="checkbox" class="chk_Product" value="@item.AssociatedObject.idProductCategory">  
                        <label style="padding:0">@item.AssociatedObject.ProductCategoryNamelabel>  
                    label>  
                    @if (item.ProductsList.Count > 0)  
                    {  
                        @Html.Partial("_productOffered", item)  
                    }  
                div>  
            li>  
        }  
    ul>  
}


Что я уже пробовал:

Что касается вызова частичного представления из основного представления с помощью цикла foreach, то внешний вид и ощущения выглядят так, как показано на рисунке ниже,

[^]

Как я могу проверить / снять флажок со списка, как показано на рисунке выше?

Примечание: здесь я использую одно и то же имя класса class="chk_Product" для всех флажков. И '@товар.AssociatedObject.ProductCategoryName ' - это конструкционные изделия и электротехнические изделия (заголовок) прочие все флажки являются обязательными с частичного просмотра.

Пожалуйста, помогите мне...

1 Ответов

Рейтинг:
7

Richard Deeming

Начните с создания согласованной разметки:

Смотреть:

@foreach (var item in Model)
{
    <div class="js-list list-wrapper list-padding u-fancy-scrollbar">
        <ul class="offered-list">
            @if (item.AssociatedObject.idParentCategoryProduct == 0)
            {
                <li>
                    <div class="checkbox">
                        <label class="hd-txt"><input type="checkbox" class="chk_Product" value="@item.AssociatedObject.idProductCategory">
                            <label style="padding:0">@item.AssociatedObject.ProductCategoryName</label>
                        </label>
                    </div>
                    @Html.Partial("_productOffered", item)
                </li>  
            }
            else
            {
                <li>
                    @Html.Partial("_productOffered", item)  
                </li>
            }
        </ul>
    </div>
}

Частичный:
@model Rebox.BIL.DataModel.ProductsMenuListDM
  
@foreach (var item in Model.ProductsList)
{
    @if (item != null)
    {
        <ul class="offered-sub-list">
            <li>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" class="chk_Product" value="@item.AssociatedObject.idProductCategory">
                        <label style="padding:0">@item.AssociatedObject.ProductCategoryName</label>
                    </label>
                </div>
                @if (item.ProductsList.Count > 0)
                {
                    @Html.Partial("_productOffered", item)  
                }  
            </li>
        </ul>
    }
}

Теперь, чтобы перейти от родительского флажка к его дочерним флажкам, вам просто нужно найти ближайший <li>, найти .offered-sub-list, а затем найдите все флажки в этом списке:
$(".chk_Product").on("click", function(){
    $(this).closest("li").find("> .offered-sub-list .chk_Product").prop("checked", this.checked);
});

Демонстрация[^]

Abhilash.J.A

@Richard Deeming: ты спас меня... Большое вам спасибо, сэр! Он работает очень хорошо.