Deshabilitar un campo de entrada si se selecciona el select
Resuelto
ScreamFR
Mensajes publicados
73
Estado
Miembro
-
ScreamFR Mensajes publicados 73 Estado Miembro -
ScreamFR Mensajes publicados 73 Estado Miembro -
```html
<script>
document.addEventListener("DOMContentLoaded", function() {
const select = document.getElementById("article");
const input = document.getElementById("article");
select.addEventListener("change", function() {
if (select.value === "Pas d'article") {
input.disabled = false;
} else {
input.disabled = true;
}
});
// Initial state
if (select.value !== "Pas d'article") {
input.disabled = true;
}
});
</script>
```
<script>
document.addEventListener("DOMContentLoaded", function() {
const select = document.getElementById("article");
const input = document.getElementById("article");
select.addEventListener("change", function() {
if (select.value === "Pas d'article") {
input.disabled = false;
} else {
input.disabled = true;
}
});
// Initial state
if (select.value !== "Pas d'article") {
input.disabled = true;
}
});
</script>
```
3 respuestas
Buenas noches,
Por lo tanto, se activa el evento ONCHANGE
https://www.w3schools.com/jsref/event_onchange.asp
Para "dirigir" un elemento html, puedes usar su id
https://www.w3schools.com/jsref/met_document_getelementbyid.asp
Y para deshabilitarlo, hay que "jugar" con su atributo disabled
https://www.w3schools.com/tags/att_input_disabled.asp
Ahí lo tienes, solo tienes que ensamblar todo eso (3 líneas de código...) y el trabajo estará hecho.
Un pequeño "if" para poder reactivar el input si dejas el select vacío y estará perfecto.
https://www.w3schools.com/js/js_if_else.asp
Atentamente,
Jordane
el usuario utiliza el select
Por lo tanto, se activa el evento ONCHANGE
https://www.w3schools.com/jsref/event_onchange.asp
el segundo input se vuelve gris
Para "dirigir" un elemento html, puedes usar su id
https://www.w3schools.com/jsref/met_document_getelementbyid.asp
Y para deshabilitarlo, hay que "jugar" con su atributo disabled
https://www.w3schools.com/tags/att_input_disabled.asp
document.getElementById("id_de_tu_input").disabled = true; Ahí lo tienes, solo tienes que ensamblar todo eso (3 líneas de código...) y el trabajo estará hecho.
Un pequeño "if" para poder reactivar el input si dejas el select vacío y estará perfecto.
https://www.w3schools.com/js/js_if_else.asp
Atentamente,
Jordane
Efectivamente, hay un error que se señala en el navegador.
mi página js -> myFunction_facture.js
Una parte del html con el ctrl-u (Hay muchas líneas)
al final de la página html :
mi página js -> myFunction_facture.js
function disabled(){ if (document.getElementById("article").value == "Seleccionar un artículo") { document.getElementById("newarticle").disabled = false; }else{ document.getElementById("newarticle").disabled = true; } } Una parte del html con el ctrl-u (Hay muchas líneas)
<div data-repeater-list="group-a"> <div data-repeater-item> <div class="row mb-50"> <div class="col-3 col-md-4 invoice-item-title">Artículo</div> <div class="col-3 invoice-item-title">Precio U</div> <div class="col-3 invoice-item-title">Cantidad</div> <div class="col-3 col-md-2 invoice-item-title">Precio HT</div> </div> <div class="invoice-item d-flex border rounded mb-1"> <div class="invoice-item-filed row pt-1 px-1"> <div class="col-12 col-md-4 form-group"> <select id="article" class="form-control invoice-item-select" onchange="disabled()"> <option value="Sin artículo">Seleccionar un artículo</option> <option value="Kinder">Kinder</option> <option value="Coca">Coca</option> </select> </div> <div class="col-md-3 col-12 form-group"> <input name="cout" id="cout" type="number" class="form-control" placeholder="0" onkeyup="myFunction()"> </div> <div class="col-md-3 col-12 form-group"> <input name="quantite" id="quantite" type="number" class="form-control" placeholder="0" onkeyup="myFunction()"> </div> <div class="col-md-2 col-12 form-group">       <strong id="demo" class="text-primary align-middle">00.00 €</strong> </div> <div class="col-md-4 col-12 form-group"> <label for="article">Artículo :</label> <input name="article" id="newarticle" type="text" class="form-control invoice-item-desc" placeholder="Nombre del artículo"> </div> <div class="col-md-3 col-12 form-group"> <label for="ref">REF :</label> <input name="referencearticle" id="referencearticle" type="text" class="form-control invoice-item-desc" placeholder="Referencia"> </div> </div> <div class="invoice-icon d-flex flex-column justify-content-between border-left p-25"> <div class="dropdown"> <i class="bx bx-cog cursor-pointer dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button"></i> <div class="dropdown-menu p-1"> <div class="row"> <div class="col-12 form-group"> <label for="discount">Descuento(%)</label> <input name="remise" id="remise" value="0" type="number" class="form-control" id="discount" placeholder="descuento" maxlength="3" min="0" max="100"> </div> <div class="col-12 form-group"> <label for="discount">IVA(%)</label> <input name="tva" id="tva" value="0" type="number" class="form-control" id="discount" placeholder="0" maxlength="3" min="0" max="100"> </div> </div> <hr> </div> </div> </div> </div> </div> </div>
al final de la página html :
<!-- BEGIN: Page JS--> <script src="../../../app-assets/js/scripts/pages/app-invoice.js"></script> <script src="../../../app-assets/js/scripts/pages/app-add_facture.js"></script> <script src="../../../app-assets/js/scripts/pages/myFunction_facture.js"></script> <!-- END: Page JS-->
Vira el onchange en tu select
y reemplaza tu js por
Nota: Notarás que en el IF ... hay que usar la VALUE (No hay artículo) y no lo que se muestra en la lista ...
y reemplaza tu js por
const selectElement = document.getElementById("article"); selectElement.addEventListener('change', (event) => { console.log('El valor del select ha cambiado...', selectElement.value); var inp = document.getElementById("newarticle"); if (selectElement.value == "No hay artículo") { inp.disabled = false; }else{ inp.disabled = true; } }); Nota: Notarás que en el IF ... hay que usar la VALUE (No hay artículo) y no lo que se muestra en la lista ...
Ya... si hubiera sabido que usabas jQuery, habría estado bien.
Aunque el código no es muy diferente al js "puro", habría preferido...
Luego... mira bien tu código...
Mira, más precisamente, dónde has colocado tu IF... claramente no está en el lugar adecuado.
PD: En el futuro, te pediré que organices realmente bien tus preguntas.
La pregunta que hiciste se refería a poder desactivar un input en función de un select.
Esa pregunta está tratada y resuelta...
Así que normalmente, para este "nuevo" problema, deberías haber creado una nueva discusión.
Entonces me dirás... sí, pero está relacionado... Bueno... como todas las preguntas que tratan sobre programación... incluso de informática... todo está relacionado... (no solo por el autor de la pregunta...) pero siguen siendo problemáticas bien distintas... y para que nos podamos encontrar, abrimos una discusión específica para cada problema.
--
Atentamente,
Jordane
Aunque el código no es muy diferente al js "puro", habría preferido...
Luego... mira bien tu código...
Mira, más precisamente, dónde has colocado tu IF... claramente no está en el lugar adecuado.
PD: En el futuro, te pediré que organices realmente bien tus preguntas.
La pregunta que hiciste se refería a poder desactivar un input en función de un select.
Esa pregunta está tratada y resuelta...
Así que normalmente, para este "nuevo" problema, deberías haber creado una nueva discusión.
Entonces me dirás... sí, pero está relacionado... Bueno... como todas las preguntas que tratan sobre programación... incluso de informática... todo está relacionado... (no solo por el autor de la pregunta...) pero siguen siendo problemáticas bien distintas... y para que nos podamos encontrar, abrimos una discusión específica para cada problema.
--
Atentamente,
Jordane
Html :
JS :
function disabled(){ if (document.getElementById("article").value == "Sin artículo") { document.getElementById("newarticle").disabled = false; }else{ document.getElementById("newarticle").disabled = true; } }¿Has mirado en la consola de JavaScript de tu navegador si hay mensajes o errores?
¿Puedes mostrarnos el código "generado" de tu página (el que puedes ver cuando presionas CTRL+u en tu navegador mientras la página está abierta)?