Varias cosas:
- De entrada, el
input
debería aparecer como disabled
- Tienes que referenciar al
input
por su id, para habilitarlo o no, cosa que no haces.
- Tienes que verificar el valor
selectedIndex
del select
para saber si han sido seleccionados o no. En el código de ejemplo he puesto un option
por defecto para evitar confusiones. Esto permite dos cosas: desmarcar una opción que se haya elegido por error, volviendo a ese option
por defecto; y volver a deshabilitar el input
en ese caso. Ambas cosas serán harto difíciles cuando no imposibles sin ese option
por defecto.
function myDisFunction() {
var selWarehouse = document.getElementById("warehouse_id");
var refInput = document.getElementById("ref_id");
refInput.disabled = (!selWarehouse.selectedIndex > 0);
}
<label for="warehouse">* Almacén</label>
<select id="warehouse_id" onChange="myDisFunction()">
<option selected>-- Seleccione --</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<label for="inventory_id">* Referencia</label>
<input type="text" id="ref_id" disabled>
Finalmente, te recomiendo que evites funciones in-line, son una mala práctica. Es mejor asignar eventos de escucha en el código Javascript, así, tu HTML es independiente. Poner funciones in-line significa poner en contexto HTML código Javascript, violando el principio de responsabilidad única.
Veamos un ejemplo usando escucha de eventos:
const selWarehouse = document.querySelector('#warehouse_id');
selWarehouse.addEventListener('change', (event) => {
var refInput = document.getElementById("ref_id");
refInput.disabled = (!selWarehouse.selectedIndex > 0);
});
<label for="warehouse">* Almacén</label>
<select id="warehouse_id">
<option selected>-- Seleccione --</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<label for="inventory_id">* Referencia</label>
<input type="text" id="ref_id" disabled>
¿Cuál es la diferencia? Hemos sacado la llamada in-line del HTML: onChange="myDisFunction(this)"
, no la necesitamos, estamos escuchando los cambios del select
, por su id.
¿Qué ventajas tiene esto? Ya dije una: respetamos el principio de responsabilidad única y facilitamos el mantenimiento del código. Imagina un proyecto grande, con miles de HTML en los que has puesto llamadas in-line. Ahora, esas funciones in-line necesitan otro parámetro o algo por el estilo. Te quiero ver, buscando entre los miles de HTML para cambiar esto: onChange="myDisFunction(this)"
por esto: onChange="myDisFunction(this,ooootroParametro)"
.