Returning Partial View causes checkbox to not actually check

[jovaughn]

The checkbox works fine until it is replaced through an Ajax call which returns a partial view.

Afterwards the click event is still fired but the checkbox does not show as checked.

If I remove the classes "k-checkbox" and "k-checkbox-label" from the input and label it works just fine.

html-partial view

<input id="@Model[i].DefinitionName" asp-for="@Model[i].IsRequired" class="k-checkbox" type="checkbox" onclick="ToggleRelatedGLSegmentComboBox()" />
        <label for="@Model[i].DefinitionName" class="k-checkbox-label" style="width:15em;">@Model[i].BusinessName</label>

c#

return PartialView("_PartialViewName", model);

js

$.ajax(

            {                

                success: function (html) {

                    glPartialDiv.html(html);

                },                

            });

[Dimitar]

Hello Jovaughn,

With the latest release, a change was introduced in the themes that fine-tuned the classes used for the radio and checkboxes - mainly removing the k-checkbox-label class as it caused some issues such as the one described. Thus, the possible rendering scenarios with the latest version of Telerik UI for ASP.NET Core are:

1) Using with a label

<input type="checkbox" id="check1" class="k-checkbox" checked="checked">
<label for="check1">I like apples</label>

2) Wrap the input in a label element and have the text in a span:

<label>
    <input type="checkbox" id="check1" class="k-checkbox" checked="checked">
    <span>I like apples</span>
</label>

Taking the above into consideration, may I ask you to remove the k.checkbox-label class as it is no longer needed and verify if that resolves the issue?

If the above does not help, it would be of great help if you could provide a simple solution that demonstrates the issue and I will be happy to investigate it further.

I am looking forward to hearing from you.

Regards,
Dimitar
Progress Telerik

[jovaughn]

Updating js/css files manually to version 2020.1.219 and this option worked. Thanks

<input type="checkbox" id="check1" class="k-checkbox" checked="checked">
<label for="check1">I like apples</label>