I would like to know if there is any function to enable or disable a INPUT depending on the value of a SELECT
This is my code:
<div>
<select name='id_categoria' id='id_categoria' onchange="carg(1);">
<option value="1" selected>Clientes</option>
<option value="2">Empresas</option>
<option value="3">Personas</option>
</select>
</div>My intention is to select the options 2 or 3 to be able to enable the input and otherwise if the 1 is selected Disable it
JQuery
You can use the prop methods to assign the value to an attribute of an HTML tag. I also recommend that you add the attribute disabled to the input so that by default it is disabled.
$( function() {
$("#id_categoria").change( function() {
if ($(this).val() === "1") {
$("#id_input").prop("disabled", true);
} else {
$("#id_input").prop("disabled", false);
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<select name='id_categoria' id='id_categoria'>
<option value="1" selected>Clientes</option>
<option value="2">Empresas</option>
<option value="3">Personas</option>
</select>
<input id="id_input" type="text" disabled>
</div> You can pass the reference of your select to your function carg with the reserved word this and check its value.
In case the selected options are 2 or 3, enable input and otherwise disable it.
Example:
var input = document.getElementById('input');
function carg(elemento) {
d = elemento.value;
if(d == "1"){
input.disabled = true;
}else{
input.disabled = false;
}
}<div>
<select name='id_categoria' id='id_categoria' onchange="carg(this);">
<option value="1" selected>Clientes</option>
<option value="2">Empresas</option>
<option value="3">Personas</option>
</select>
<input id="input" type="text">
</div>
$(document).ready(function() {
$('#id_categoria').change(function(e) {
if ($(this).val() === "1") {
$('#d').prop("disabled", true);
} else {
$('#d').prop("disabled", false);
}
})
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
<select name='id_categoria' id='id_categoria' >
<option value="1" selected>Clientes</option>
<option value="2">Empresas</option>
<option value="3">Personas</option>
</select>
<input id="d" disabled="disabled" type="text" value="test">
</div>I would do so, bindearia to the change of id_categoria or if you already use the onchange because it would put it within that function ... to taste of the consumer
Use option:selected to get the value of the select.
Then with a switch you can handle the cases.
$("#btn").prop('disabled', false);
$( "#Select_id").change(function() {
var selector = $("#Select_id option:selected").val();
switch(selector){
case "1":
$("#btn").prop('disabled', false);
break;
case "2":
$("#btn").prop('disabled', true);
break;
case "3":
$("#btn").prop('disabled', true);
break;
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select name='Select_nombre' id='Select_id'>
<option value="1" selected>Clientes</option>
<option value="2">Empresas</option>
<option value="3">Personas</option>
</select>
</div>
<input type="button" id="btn" value="BOTON"></input>