0

Tengo este código:

<html>Código 128: <input class="" type="checkbox" name="nro_cod[]"id="nro_cod1" value="128" onclick="habil_fecha()"/> <input type="date" name="fec_cod[]" id="fec_cod1" disabled="true" value="<?php echo "$fec_cod"; ?>"><br><br>
Código 129: <input class="" type="checkbox" name="nro_cod[]" id="nro_cod2" value="129" onclick="habil_fecha()"/> <input type="date" name="fec_cod[]" id="fec_cod2" disabled="true" value="<?php echo "$fec_cod"; ?>"><br><br>
Código 349: <input class="" type="checkbox" name="nro_cod[]" id="nro_cod3" value="349" onclick="habil_fecha()"/> <input type="date" name="fec_cod[]" id="fec_cod3" disabled="true" value="<?php echo "$fec_cod"; ?>"><br><br>
Código 384: <input class="" type="checkbox" name="nro_cod[]" id="nro_cod4" value="384" onclick="habil_fecha()"/> <input type="date" name="fec_cod[]" id="fec_cod4" disabled="true" value="<?php echo "$fec_cod"; ?>"><br><br></html>

y la funcion

<script>
 function habil_fecha(){
if(document.formulario.nro_cod1.checked == true){
  document.formulario.fec_cod1.disabled = false;
  }
else{
  document.formulario.fec_cod1.disabled = true;
  }
if(document.formulario.nro_cod2.checked == true){
  document.formulario.fec_cod2.disabled = false;
  }
else{
  document.formulario.fec_cod2.disabled = true;
  }
}
if(document.formulario.nro_cod3.checked == true){
  document.formulario.fec_cod3.disabled = false;
    }
else{
  document.formulario.fec_cod3.disabled = true;
    }
}
if(document.formulario.nro_cod4.checked == true){
  document.formulario.fec_cod4.disabled = false;
    }
else{
  document.formulario.fec_cod4.disabled = true;
    }
  }
}
</script>

Cada "Código xxx" junto a su fecha correspondiente van a ser insertado en una tabla con campos nro_cod y fec_cod, respectivamente en una base de datos MySQL, mediante código php. La función JavaScript la utilizo para que cuando se tilda el checkbox se habilite el campo fecha que le corresponde. La consulta es si se puede optimizar la función habil_fec() trabajando con los array de cada "name" de los input nro_cod[] y fec_cod[]. Como está cumple con lo que necesito y los tiempos que manejo realmente no me permiten detenerme más en el tema. Sólo es que quisiera saber como optimizarla. Desde ya agradecido.

6
  • Bueno rectifico: la funcion '<script> function habil_fecha(){ if(document.formulario.nro_cod1.checked == true){ document.formulario.fec_cod1.disabled = false; } else{ document.formulario.fec_cod1.disabled = true; }} </script>' habilita el campo fec_cod1 pero para que los campos similares tengan los mismos resultados debo hacer una funcion habil_fec para cada par.
    – DieWalever
    el 12 sep. 2018 a las 13:39
  • Podes usar jQuery o sólo JavaScript? el 12 sep. 2018 a las 13:45
  • Debo añadir soy novato... poco sé de jQuery @JuanSalvadorPortugal
    – DieWalever
    el 12 sep. 2018 a las 13:47
  • Pero incluis la librería en tu proyecto? el 12 sep. 2018 a las 13:49
  • Ahora en 5 minutitos te armo una respuesta con jQuery por si te sirve :D el 12 sep. 2018 a las 13:50

3 respuestas 3

2

Usando jQuery puede hacerse practicamente en una línea, por ejemplo

$('input[type="checkbox"').on('change',function(){  
$(this).next('input[type="date"]').prop('disabled',!$(this).prop('checked'));  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="codigo">Código 128: 
<input class="" type="checkbox" name="nro_cod[]" id="nro_cod1" value="128"  /> 
<input type="date" name="fec_cod[]" id="fec_cod1" disabled="true" value="23" /> 

<p class="codigo">Código 129: 
<input class=""
  type="checkbox" name="nro_cod[]" id="nro_cod2" value="129" /> <input type="date" name="fec_cod[]" id="fec_cod2" disabled="true" value="23"></p>
  
<p class="codigo">Código 349: <input class="" type="checkbox" name="nro_cod[]"
  id="nro_cod3" value="349" />
  <input type="date" name="fec_cod[]" id="fec_cod3" disabled="true" value="23"/></p>

<p class="codigo">Código 384: 
  <input class="" type="checkbox" name="nro_cod[]" id="nro_cod4" value="384"
  /> 
  <input type="date" name="fec_cod[]" id="fec_cod4" disabled="true" value="23"></p>

3
  • Como detalle, te faltaría cerrar el input type checkbox
    – Jakala
    el 12 sep. 2018 a las 14:25
  • @Jakala No se a que checkbox te referís, yo los veo todos cerrados, si se me esta pasando, porfavor, edita mi respuesta cerrándolo! el 12 sep. 2018 a las 16:18
  • 1
    En el javascript, la primera línea, el input type=checkbox, no tiene cerrado el corchete. No me deja editar, debo cambiar 6 o más caracteres....te lo dejo a ti ok?
    – Jakala
    el 12 sep. 2018 a las 22:21
2

He cambiado un poco el HTML porque para la demostración el PHP es un estorbo. A continuación viene mi código. Espero que lo encuentres útil.

let codigoRy = Array.from(document.querySelectorAll(".codigo"));

codigoRy.map((p) =>{
  p.checkbox = p.querySelector("[type='checkbox']");
  p.date = p.querySelector("[type='date']");
  p.checkbox.addEventListener("change",()=>{
    if(p.checkbox.checked){p.date.disabled = false;}else{p.date.disabled = true;}
  })
})
<p class="codigo">Código 128: 
<input class="" type="checkbox" name="nro_cod[]" id="nro_cod1" value="128"  /> 
<input type="date" name="fec_cod[]" id="fec_cod1" disabled="true" value="23" /> 
                                                                               <p class="codigo">Código 129: 
<input class=""
  type="checkbox" name="nro_cod[]" id="nro_cod2" value="129" /> <input type="date" name="fec_cod[]" id="fec_cod2" disabled="true" value="23"></p>
  
<p class="codigo">Código 349: <input class="" type="checkbox" name="nro_cod[]"
  id="nro_cod3" value="349" />
  <input type="date" name="fec_cod[]" id="fec_cod3" disabled="true" value="23"/></p>

<p class="codigo">Código 384: 
  <input class="" type="checkbox" name="nro_cod[]" id="nro_cod4" value="384"
  /> 
  <input type="date" name="fec_cod[]" id="fec_cod4" disabled="true" value="23"></p>

4
  • 1
    +1 por el uso de lambda el 12 sep. 2018 a las 14:00
  • pero debería usar forEach en lugar de map el 12 sep. 2018 a las 14:21
  • Inclui en la cabecera de mi formulario '<script src="jquery-3.3.1.min.js" type="text/javascript"></script>' que obviamente esta guardado en la misma carpeta que el formulario y el código de jQuery de tu respuesta lo incluí entre dos etiquetas '<script>'. Pero no funciona. Qué me falta? O qué estoy haciendo mal?
    – DieWalever
    el 12 sep. 2018 a las 14:34
  • Gracias DieWalever por tu comentario. Mi código no utiliza JQuery. Es vanilla. Si haces click en el botón que dice "ejecutar" verás que sí funciona. A lo mejor no has visto que el HTML esta cambiado. He añadido unos <p class="codigo">
    – enxaneta
    el 12 sep. 2018 a las 14:39
0

Otra solucion, en este caso javascript sin lamdas:

<script>
 function habil_fecha(field){
      aux =  field.attr('id').split("_");
      fec = "fec_"+ aux[1];
      document.getElementById(fec).disabled = ! field.checked;
 }</script>

Lo que hacemos es recibir el elemento actual (se envia en el html como this). Dividimos el id del atributo ID, para cojer el segundo termino, esto es, guarda nro en aux[0] y cod1 en aux[1]. Eso nos permite crear el fec_cod correspondiente. Por ultimo lo buscamos y le asignamos el valor contrario al de checkeado (si checked es true, entonces disable debe ser false).

y en el html pasamos el elemento actual a la funcion:

Código 128: <input class="" type="checkbox" name="nro_cod[]"id="nro_cod1" value="128" onclick="habil_fecha(this)"/> 
            <input type="date" name="fec_cod[]" id="fec_cod1" disabled="true" value="<?php echo "$fec_cod"; ?>"><br><br>
Código 129: <input class="" type="checkbox" name="nro_cod[]" id="nro_cod2" value="129" onclick="habil_fecha(this)"/> 
            <input type="date" name="fec_cod[]" id="fec_cod2" disabled="true" value="<?php echo "$fec_cod"; ?>"><br><br>
Código 349: <input class="" type="checkbox" name="nro_cod[]" id="nro_cod3" value="349" onclick="habil_fecha(this)"/>  
            <input type="date" name="fec_cod[]" id="fec_cod3" disabled="true" value="<?php echo "$fec_cod"; ?>"><br><br>
Código 384: <input class="" type="checkbox" name="nro_cod[]" id="nro_cod4" value="384" onclick="habil_fecha(this)"/> 
            <input type="date" name="fec_cod[]" id="fec_cod4" disabled="true" value="<?php echo "$fec_cod"; ?>"><br><br>

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.