My price input should be disabled or enabled automatically after selecting status. Now it turns in disabled after click on input (during wrong status) but it doesn't back to enabled when my status is good. What is the right way to do it ?
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;
}
}
Unsure why you are mixing JavaScript an jQuery. I would use one or the other, not both.
function setPriceInputDisabled(){
$("#price-create").prop("disabled", ($("#cattery-status-create").val() === "S"));
}
This will only enable the Input upon click event when Value is not "S".
The click event does not seem like the right callback to bind to. I suspect you want to modify the property when the Select element is changed. If the User selects a Value of "S"; the Input is disabled.
$(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>