Check box binds correctly but can't check or uncheck

In my custom Kendo grid popup editor, the check box binds correctly but can’t be checked or unchecked.

I could not find any posts relating to this issue. I have tried the Keno check box (remarked out) and plain html. I also tried to toggle the checkbox with an onclick JavaScript function, but that did not work either. When you hover over the check box or label the cursor does change to a hand which indicates that it should allow me to click it. The check box in my model is defined as public bool Active { get; set; }

I have the same issue when I use the default Kendo popup editor

@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"))
            )
)