1

Tengo el siguiente formulario en php, pero quiero realizar algo... Ya tengo una base pero tengo algunos problemas a continuacion los pondre.

El formulario es este: introducir la descripción de la imagen aquí

Lo que quiero hacer es que dependiendo del numero (1 al 6) de "¿Cuantas veces comes al dia?" se la opcion que se habilite de las comidas, tengo una base pero mi problema es el siguiente.

Todo parece bien, al entrar al formulario y si ponemos 2, se habilita comida #1 y #2, pero si le cambio digamos a 4, se deberia de habilitar comida 1,2,3 y 4, pero eso no sucede, se queda con el anterior que en este caso seria 2.

introducir la descripción de la imagen aquí

Mi codigo es el siguiente.

¿Cuantas veces comes al día?
<input type="number" min="1" max="5" id="c1" name="CantidadComida" required>

<h5>Horario de alimentos</h5>
<div class="form-row">
    Comida #1
    <input type="time" name="comida1" id="comida1">
    Comida #2
    <input type="time" name="comida2" id="comida2">
    Comida #3
    <input type="time" name="comida3" id="comida3">
    Comida #4
    <input type="time" name="comida4" id="comida4">
    Comida #5
    <input type="time" name="comida5" id="comida5">
    Comida #6
    <input type="time" name="comida6" id="comida6">
</div>

<script>
    var c1 = document.getElementById('c1');
    var comida1 = document.getElementById('comida1')
    var comida2 = document.getElementById('comida2')
    var comida3 = document.getElementById('comida3')
    var comida4 = document.getElementById('comida4')
    var comida5 = document.getElementById('comida5')
    var comida6 = document.getElementById('comida6')

    let num = document.getElementById('c1');
    num.addEventListener("keyup", function () {
        if (this.value == 1) {
            comida2.disabled = true;
            comida3.disabled = true;
            comida4.disabled = true;
            comida5.disabled = true;
            comida6.disabled = true;
        }
        if (this.value == 2) {
            comida3.disabled = true;
            comida4.disabled = true;
            comida5.disabled = true;
            comida6.disabled = true;
        }
        if (this.value == 3) {
            comida4.disabled = true;
            comida5.disabled = true;
            comida6.disabled = true;
        }
        if (this.value == 4) {
            comida5.disabled = true;
            comida6.disabled = true;
        }
        if (this.value == 5) {
            comida6.disabled = true;
        }
        if (this.value == 6) {
            comida6.disabled = false;
        }

    });
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div> ```

1 respuesta 1

0

Tu funcion es correcta, pero si introduces un valor, ejemplo 2. Los inputs 3 al 6 quedan en disabled. Y al ingresar un nuevo numero estos no retornan a su estado original.

Prueba así:

¿Cuantas veces comes al día?
<input type="number" min="1" max="5" id="c1" name="CantidadComida" required>

<h5>Horario de alimentos</h5>
<div class="form-row">
    Comida #1
    <input type="time" name="comida1" id="comida1">
    Comida #2
    <input type="time" name="comida2" id="comida2">
    Comida #3
    <input type="time" name="comida3" id="comida3">
    Comida #4
    <input type="time" name="comida4" id="comida4">
    Comida #5
    <input type="time" name="comida5" id="comida5">
    Comida #6
    <input type="time" name="comida6" id="comida6">
</div>

<script>
    var c1 = document.getElementById('c1');
    var comida1 = document.getElementById('comida1')
    var comida2 = document.getElementById('comida2')
    var comida3 = document.getElementById('comida3')
    var comida4 = document.getElementById('comida4')
    var comida5 = document.getElementById('comida5')
    var comida6 = document.getElementById('comida6')

    let num = document.getElementById('c1');
    num.addEventListener("change", function () {
        if (this.value == 1) {
            comida1.disabled = false;
            comida2.disabled = true;
            comida3.disabled = true;
            comida4.disabled = true;
            comida5.disabled = true;
            comida6.disabled = true;
        }
        if (this.value == 2) {
            comida1.disabled = false;
            comida2.disabled = false;
            comida3.disabled = true;
            comida4.disabled = true;
            comida5.disabled = true;
            comida6.disabled = true;
        }
        if (this.value == 3) {
            comida1.disabled = false;
            comida2.disabled = false;
            comida3.disabled = false;
            comida4.disabled = true;
            comida5.disabled = true;
            comida6.disabled = true;
        }
        if (this.value == 4) {
            comida1.disabled = false;
            comida2.disabled = false;
            comida3.disabled = false;
            comida4.disabled = false;
            comida5.disabled = true;
            comida6.disabled = true;
        }
        if (this.value == 5) {
            comida1.disabled = false;
            comida2.disabled = false;
            comida3.disabled = false;
            comida4.disabled = false;
            comida5.disabled = false;
            comida6.disabled = true;
        }
        if (this.value == 6) {
            comida1.disabled = false;
            comida2.disabled = false;
            comida3.disabled = false;
            comida4.disabled = false;
            comida5.disabled = false;
            comida6.disabled = false;
        }
    });
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

6
  • Me sirvio de maravilla muchas gracias! Pero ahora me surgio un problema nuevo, funciona muy bien cuando yo ingreso numero 1 al 6 mediante el teclado, pero cuando le doy a la flecha del type number no habilitan los type time, ¿Como el puedo hacer? @EvilFearzZ
    – Aleh
    Commented el 14 jul. 2022 a las 17:28
  • Deberían funcionar bien. Prueba ejecutando tu código en una Ventana Privada si utilizas Firefox. O en modo incógnito si utilizas Chrome
    – EvilFearzZ
    Commented el 14 jul. 2022 a las 17:33
  • Ya lo intente en diferentes y no no funciona, solo funciona cuando yo ingreso el numero por teclado, pero cuando le doy click a la flecha de mas o menos de type number no desabilita ninguno.
    – Aleh
    Commented el 14 jul. 2022 a las 17:36
  • Ya entiendo. Identifica esta linea num.addEventListener("keyup", function () { y sustituye keyup por change Ya que Keyup solo se limitara a ejecutarse cuando escribas en el input
    – EvilFearzZ
    Commented el 14 jul. 2022 a las 17:40
  • 1
    Listo! Muchisimas gracias por tu ayuda!
    – Aleh
    Commented el 14 jul. 2022 a las 17:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.