Home / Questions / 161651
Accepted
Lucas. D
Asked: 2020-05-05 10:29:28 +0800 CST 2020-05-05 10:29:28 +0800 CST

Включить или отключить вход в зависимости от выбранного переключателя

  • 772

У меня есть следующий HTML-код, состоящий из двух переключателей. Мне нужно, чтобы, если пользователь выберет один, в зависимости от того, какой он есть, поле «Процент скидки» было активным или нет.

<div class="form-group">
    <label for="isProductDiscounted" class="text-uppercase font-weight-bold">Is Product Discounted?</label>
    <div class="btn-group w-100" data-toggle="buttons" name="isProductDiscounted">
        <label class="btn btn btn-blue-grey waves-effect w-50 form-check-label active">
            <input id="isDiscounted" class="form-check-input" name="isDiscounted" type="radio" value= 0 th:field="*{discounted}" autocomplete="off" checked> No discounted
        </label>

        <label class="btn btn btn-blue-grey waves-effect form-check-label w-50">
            <input id="isNotDiscounted" class="form-check-input" name="isDiscounted" type="radio" value= 1 th:field="*{discounted}"> Discounted
        </label>
    </div>
</div>

<div class="form-group">
    <label for="discountPercentage" class="text-uppercase font-weight-bold">Discount Percentage</label>
    <input type="number" class="form-control" id="discountPercentage" th:field="*{discountPercentage}">
    <small class="form-text text-danger" th:if="${#fields.hasErrors('discountPercentage')}" th:errors="*{discountPercentage}"></small>
</div>

По умолчанию при загрузке страницы выбран переключатель «Без скидки». Я пробовал следующий код, но он вообще не работает, так как ввод всегда отключен независимо от выбранного переключателя.

var discounted = document.getElementById('isDiscounted');
var no_discounted = document.getElementById('isNotDiscounted')
var discount_percentage = document.getElementById('discountPercentage')

if(discounted.checked) {
    discount_percentage.disabled = true;
} else  {
    discount_percentage.disabled = false;
}

Заранее спасибо.

javascript

1 Answers

  1. Best Answer

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

    Код будет выглядеть так:

    var discounted = document.getElementById('isDiscounted');
var no_discounted = document.getElementById('isNotDiscounted')
var discount_percentage = document.getElementById('discountPercentage')

function updateStatus() {
  if (discounted.checked) {
    discount_percentage.disabled = true;
  } else {
    discount_percentage.disabled = false;
  }
}

discounted.addEventListener('change', updateStatus)
no_discounted.addEventListener('change', updateStatus)
    <div class="form-group">
  <label for="isProductDiscounted" class="text-uppercase font-weight-bold">Is Product Discounted?</label>
  <div class="btn-group w-100" data-toggle="buttons" name="isProductDiscounted">
    <label class="btn btn btn-blue-grey waves-effect w-50 form-check-label active">
            <input id="isDiscounted" class="form-check-input" name="isDiscounted" type="radio" value= 0 th:field="*{discounted}" autocomplete="off" checked> No discounted
        </label>

    <label class="btn btn btn-blue-grey waves-effect form-check-label w-50">
            <input id="isNotDiscounted" class="form-check-input" name="isDiscounted" type="radio" value= 1 th:field="*{discounted}"> Discounted
        </label>
  </div>
</div>

<div class="form-group">
  <label for="discountPercentage" class="text-uppercase font-weight-bold">Discount Percentage</label>
  <input type="number" class="form-control" id="discountPercentage" th:field="*{discountPercentage}" disabled>
  <small class="form-text text-danger" th:if="${#fields.hasErrors('discountPercentage')}" th:errors="*{discountPercentage}"></small>
</div>

    • 4