У меня есть страница Razor с флажком Bootstrap 4.3.1 Toggle Switch. Он привязан к модели страницы Razor и отлично работает. У меня также есть функция javascript, которая меняет метку в зависимости от того, проверено состояние или нет.
Я хочу иметь возможность изменить метку на правильную для отмеченного / не проверяется при загрузке страницы.
Мой код для создания флажка с HTML .CheckBoxFor приведен ниже:
<div class="form-group custom-switch">
@Html.CheckBoxFor(Model => Model.ExistingCase.Closed, new {@class= "custom-control-input", @onclick="caseClosed(this)" })
<label class="custom-control-label" id="lblCaseClosed" for="ExistingCase_Closed">Slide right to Close Case</label>
</div>
Это создает вывод страницы HTML как следует:
<div class="form-group custom-switch">
<input checked="checked" class="custom-control-input" data-val="true" data-val-required="The Closed field is required." id="ExistingCase_Closed" name="ExistingCase.Closed" onclick="caseClosed(this)" type="checkbox" value="true" />
<label class="custom-control-label" id="lblCaseClosed" for="ExistingCase_Closed">Slide right to Close Case</label>
</div>
Он отлично работает ...
Затем у меня есть Javascript, которое запускается изменением флажка (переключение) и меняет связанный текст метки «Слайд право закрыть дело »в зависимости от состояния флажка (переключатель). Этот сценарий выглядит следующим образом:
function caseClosed(el) {
document.getElementById('lblCaseClosed').innerHTML = el.checked ? "Case is Closed" : "Case is Open"
}
Это тоже работает нормально.
Я не могу сделать так, чтобы текст метки гласил «Дело закрыто» или «Дело открыто», когда страница первые загрузки. Я новичок в Razor и Javascript, поэтому я надеюсь, что существует простое событие типа onload, которое может считывать состояние «отмечен» переключателя (флажок) и устанавливать правильный текст в метке.
Извините, если это многословно, но сложно объяснить. Вот как выглядят состояния переключателя (флажка), когда я загружаю страницу. Но два других - когда я изменяю состояние на странице с помощью мыши.