复选框绑定正确但无法选中或取消选中

Question

在我的自定义 Kendo 网格弹出编辑器中，复选框绑定正确，但无法选中或取消选中。

我找不到与此问题相关的任何帖子。 我已经尝试过 Keno 复选框（已标记）和纯 html。我还尝试使用 onclick JavaScript 函数切换复选框，但这也不起作用。当您将鼠标悬停在复选框或标签上时，光标确实会变成一只手，这表明它应该允许我单击它。我的模型中的复选框定义为 public bool Active { get;放; }

当我使用默认的 Kendo 弹出编辑器时，我遇到了同样的问题。以下代码用于我的自定义编辑器和网格视图

@model Durendal.Core.ViewModels.Entities.Sku.SkuViewModel

<div class="row">
    <div class="col">
        <input asp-for="Id" type="hidden" />
        <div class="md-form md-bg">
            <input asp-for="BusinessLineName" class="form-control" />
            <label for="BusinessLineName" class="active">Business Line</label>
        </div>
        <div class="md-form md-bg">
            <input asp-for="Number" class="form-control" />
            <label for="Number" class="active">Number</label>
        </div>
        <div class="md-form md-bg">
            <input asp-for="Name" class="form-control" />
            <label for="Name" class="active">Name</label>
        </div>
        <div class="md-form md-bg">
            <input asp-for="Upc" class="form-control" />
            <label for="Upc" class="active">Upc</label>
        </div>

        @*<div class="editor-label">
                @Html.LabelFor(model => model.Active)
            </div>
            <div class="editor-field">
                @(Html.Kendo().CheckBox().Name("Active"))
            </div>*@

        <div class="form-check">
            <input type="checkbox" class="form-check-input" name="Active" id="Active" value="true">
            <label class="form-check-label" for="Active">Active?</label>
        </div>


    </div>
</div>

@(Html.Kendo()
            .Grid<Durendal.Core.ViewModels.Entities.Sku.SkuViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(s => s.BusinessLineName).Width(60);
                columns.Bound(s => s.Number).Width(50);
                columns.Bound(s => s.Name).Width(140);
                columns.Bound(s => s.Upc).Width(70);
                columns.Bound(s => s.Active).Width(30)
                .ClientGroupHeaderTemplate("# if (value == true) {# Active #} else {# Inactive #} # (Count: #= count#)");
                columns.Command(command => { command.Edit(); command.Destroy(); }).Width(90);
            })
            .ToolBar(toolbar => toolbar.Create())
            .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("_Sku"))
            .Pageable()
            .Sortable()
            .Scrollable()
            .HtmlAttributes(new { style = "height:430px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(40)
                .Aggregates(aggregates =>
                {
                    aggregates.Add(s => s.Active).Count();
                })
                .Group(groups => groups.AddDescending(s => s.Active))
                .Sort(sort =>
                {
                    sort.Add("Number").Ascending();
                })
                .Events(events => events.Error("error_handler"))
                .Model(model => model.Id(s => s.Id))
                .Create(update => update.Action("EditingPopup_Create", "Grid"))
                .Read(read => read.Action("SkuGrid_Read", "Customer", new { Id = Model }))
                .Update(update => update.Action("SkuGrid_Update", "Customer"))
                .Destroy(update => update.Action("SkuGrid_Destroy", "Customer"))
            )
)

Answer 1

请尝试这样，它对我有用..

@(Html.Kendo()
            .Grid<Durendal.Core.ViewModels.Entities.Sku.SkuViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(s => s.BusinessLineName).Width(60);
                columns.Bound(s => s.Number).Width(50);
                columns.Bound(s => s.Name).Width(140);
                columns.Bound(s => s.Upc).Width(70);
                columns.Bound(s => s.Active).Width(30)
               .ClientTemplate("<input type='checkbox' #=value =='true'? checked='checked':'' # class='chkbx' value=''   />").Title("Active").HtmlAttributes(new { style = "text-align: center;vertical-align: middle;" }).Width(100)
            })
            .ToolBar(toolbar => toolbar.Create())
            .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("_Sku"))
            .Pageable()
            .Sortable()
            .Scrollable()
            .HtmlAttributes(new { style = "height:430px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(40)
                .Aggregates(aggregates =>
                {
                    aggregates.Add(s => s.Active).Count();
                })
                .Group(groups => groups.AddDescending(s => s.Active))
                .Sort(sort =>
                {
                    sort.Add("Number").Ascending();
                })
                .Events(events => events.Error("error_handler"))
                .Model(model => model.Id(s => s.Id))
                .Create(update => update.Action("EditingPopup_Create", "Grid"))
                .Read(read => read.Action("SkuGrid_Read", "Customer", new { Id = Model }))
                .Update(update => update.Action("SkuGrid_Update", "Customer"))
                .Destroy(update => update.Action("SkuGrid_Destroy", "Customer"))
            )
)

我为复选框创建了一个客户端模板..

并使用类在javascript中创建一个更改函数..

 $('#grid').on('click', '.chkbx', function () {
        var checked = $(this).is(':checked');
        var grid = $('#grid').data().kendoGrid;
        var dataItem = grid.dataItem($(this).closest('tr'));
        if (checked) {
            $(this).attr("checked", true);
          //here you will get the click action....
           
        }
        else {
            $(this).removeAttr("checked");
           
        }
    })

Answer 2

是的，这可行，但今天早上我终于发现，另一个局部视图也有一个 Active 复选框，它与这个有冲突