Как прочитать отмеченное состояние переключателя (флажка) с помощью javascript при загрузке страницы Razor - PullRequest
0 голосов
/ 18 июня 2020

У меня есть страница 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, которое может считывать состояние «отмечен» переключателя (флажок) и устанавливать правильный текст в метке.

Извините, если это многословно, но сложно объяснить. Вот как выглядят состояния переключателя (флажка), когда я загружаю страницу. Но два других - когда я изменяю состояние на странице с помощью мыши.


Here is what it looks like when I load the page now. This is what I slide the toggle off. This is what I slide the toggle on.


1 Ответ

1 голос
/ 18 июня 2020

Попробуйте добавить в скрипт:

    window.onload = function() {
         caseClosed(document.getElementById('ExistingCase_Closed'));
    }
...