Tengo el siguiente formulario en php, pero quiero realizar algo... Ya tengo una base pero tengo algunos problemas a continuacion los pondre.
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.
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> ```