Mi ingreso de precio debe deshabilitarse o habilitarse automáticamente después de seleccionar el estado. Ahora se vuelve deshabilitado después de hacer clic en la entrada (durante un estado incorrecto), pero no vuelve a estar habilitado cuando mi estado es bueno. ¿Cuál es la forma correcta de hacerlo?
HTML:
<div class="form-row"> <div class="form-group col-md-6 text-center"> <label for="cattery-status-create" th:text="#{cattery.status}"></label> <select id="cattery-status-create" class="form-control"> <option th:each="status : ${catteryStatusCodeDict}" th:value="${status.code}" th:text="${status.value}"></option> </select> </div> <div class="form-group col-md-6 text-center"> <label for="price-create" th:text="#{price}"></label> <input id="price-create" onclick="setPriceInputDisabled()" type="number" class="form-control" max="10000" step="1"> </div> </div>JavaScript:
function setPriceInputDisabled(){ document.getElementById("price-create").disabled = false; var catteryStatusCode = $("#cattery-status-create").find(":selected").val(); if (catteryStatusCode != 'S') { document.getElementById("price-create").disabled = true; } }No estoy seguro de por qué está mezclando JavaScript y jQuery. Yo usaría uno u otro, no ambos.
function setPriceInputDisabled(){ $("#price-create").prop("disabled", ($("#cattery-status-create").val() === "S")); } Esto solo habilitará el evento Entrada al click cuando el valor no sea "S".
El evento de click no parece la devolución de llamada correcta para enlazar. Sospecho que desea modificar la propiedad cuando se cambia el elemento Seleccionar. Si el Usuario selecciona un Valor de "S"; la entrada está deshabilitada.
$(function() { function setPriceInputDisabled() { $("#price-create").prop("disabled", ($("#cattery-status-create").val() === "S")); } $("#cattery-status-create").change(setPriceInputDisabled); }); <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-row"> <div class="form-group col-md-6 text-center"> <label for="cattery-status-create" th:text="#{cattery.status}"></label> <select id="cattery-status-create" class="form-control"> <option>A</option> <option>S</option> <option>D</option> <option>F</option> <option>G</option> </select> </div> <div class="form-group col-md-6 text-center"> <label for="price-create" th:text="#{price}"></label> <input id="price-create" type="number" class="form-control" max="10000" step="1"> </div> </div>