Tengo el siguiente código HTML el cual consta de dos Radio Buttons. Necesito que si el usuario elige uno, dependiendo de cual sea el mismo, el campo "Discount Percentage" este activo o no.
<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>
Por default, al cargar la pagina el radio button seleccionado es el "No discounted". He intentado con el siguiente código, pero no funciona del todo, ya que el input siempre esta des habilitado cualquiera sea el radio button seleccionado.
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;
}
Gracias de antemano.