Как скрыть и показать текстовое поле при включении / выключении переключателя на странице бритвы? - PullRequest
Новая
       13

Как скрыть и показать текстовое поле при включении / выключении переключателя на странице бритвы?

0 голосов
/ 09 июня 2019

вот мой переключатель: 

<label class="col-sm-2 form-control-label">Type</label>
                <div class="col-sm-2">
                    <label class="container">
                        Reward
                        <input name="IsReward" type="radio" asp-for="IsReward" value="True" class="sb-isReward">
                        <span class="checkmark"></span>
                    </label>
                    <span asp-validation-for="IsReward" class="text-danger"></span>
                </div>
                <div class="col-sm-2">
                    <label class="container">
                        Fine
                        <input name="IsReward" type="radio" asp-for="IsReward" value="False" >
                        <span class="checkmark"></span>
                    </label>

                </div>

текстовое поле, которое я хочу показать или скрыть при нажатии опции «вознаграждение» или «штраф»: 

                <div class="col-sm-4">
                    <input type="text" asp-for="CostReward" class="form-control sb-digit sb-isRewardTypeDiv">
                    <span asp-validation-for="CostReward" class="text-danger"></span>
                </div>

и, наконец, мои коды jQuery, которые не работают: 

$('.sb-isGuilty').on('change', function () {
if (this.checked) {
    $('.sb-isGuiltyTypeDiv').show();
} else {
    $('.sb-isGuiltyTypeDiv').hide();
}
}).trigger('change');

1 Ответ

1 голос
/ 09 июня 2019

Вы столкнулись с этой проблемой, потому что ваше событие всегда ожидает изменения по переключателю. И когда вы выбираете новую радиокнопку, событие срабатывает на эту радиокнопку.

так что давайте посмотрим глубже. 

if (this.checked) {
    $('.sb-isGuiltyTypeDiv').show();
} else {
    $('.sb-isGuiltyTypeDiv').hide();
}

Приведенный выше код выполняется каждый раз, когда выбирается переключатель. Но когда он выбран, он всегда проверяется, поэтому, почему всегда отображается переключатель, он никогда не попадет в ложный раздел вашего блока if.

попробуйте поместить консольный журнал над оператором if. console.log(this.checked) и осмотрите вывод, вы увидите, что он всегда верен.

Что вы должны сделать, так это посмотреть значение выбранной радиокнопки, как блок кода ниже. 

$('.sb-isReward').on('change', function (e) {

if (e.target.value === "True") {

    $('.sb-isRewardTypeDiv').show();
} else {

    $('.sb-isRewardTypeDiv').hide();
}
}).trigger('change');

Я также заметил, что ваши селекторы для элементов были неправильными. Не уверен, что это было сделано намеренно, но я также изменил его в коде.

Вот кодовое перо рабочего примера: https://codepen.io/anon/pen/gNYYjL

Надеюсь, это поможет.

...