Enable or Disable an Input depending on the selected radio button

Question

Enable or Disable an Input depending on the selected radio button

Navigation

#1 by (2 votes)

6

I have the following HTML code which consists of two Radio Buttons. I need that if the user chooses one, depending on which is the same, the "Discount Percentage" field is active or not.

<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>

By default, when loading the page the selected radio button is the "No discounted". I have tried with the following code, but it does not work at all, since the input is always enabled regardless of the selected radio button.

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;
}

Thanks in advance.

javascript html

asked by Lucas. D 04.05.2018 в 20:29

source

1 answer

CMD executes tasks in a separate window, how to do it so that it can be executed again in the main window? How is the integration of 2 htaccess with ptpasswd?

score 2 · Accepted Answer

The problem is that you are not listening to changes in the radio buttons, encapsulate everything in a function and add listeners to both so that they can change the status each time you click on any of them

The code would look like this:

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>