Your Form Component must not be deserializing the value correctly on the server side.
The Xperience script https://dev.caos.carle.org/Kentico/Scripts/forms/updatableFormHelper.js
is causing the form to be auto-submitted when it is interacted with.
The response from the submission is the updated DOM rendering of the state of the form. This response is handled by onResponse
in the script:
var onResponse = function (event) {
if (!event.target.response.data) {
var selectionStart = selectionEnd = null;
if (focus && (focus.type === "text" || focus.type === "search" || focus.type === "password" || focus.type === "tel" || focus.type === "url")) {
selectionStart = focus.selectionStart;
selectionEnd = focus.selectionEnd;
}
var currentScrollPosition = $(window).scrollTop();
$(elementIdSelector).replaceWith(event.target.responseText);
$(window).scrollTop(currentScrollPosition);
if (focus.id) {
var newInput = document.getElementById(focus.id);
if (newInput) {
newInput.focus();
setCaretPosition(newInput, selectionStart, selectionEnd);
}
}
}
};
The line $(elementIdSelector).replaceWith(event.target.responseText);
is causing the issue (but not the problem), because the rendered DOM coming back from the server is overwriting the form that was just interacted with. Since the checkboxes aren't maintaining their state during the roundtrip to the server, the newly rendered DOM clears out the value selected.