[SOLUCIONADO] asignar required a inputs cuando se seleccione un checkbox

[jmg1189]

hola a todos.

bueno, en mi form tengo una tabla con 7 columnas, en las cuales, se ubican en la primera columna unos checkbox de tipo array igual que en las demas, se ubican inputs de tipo text, lo que busco y no tengo ni idea de como hacer ya que no tengo muchos conocimientos en este tema, es que al seleccionar un checkbox, se les asigne la propiedad required a las cajas de texto de esa fila. alguien podría darme una idea de como hacerlo?

tengo lo siguiente pero en la consola me indica error.

declaro mis checkbox asi;
la variable $i es un contador.

Código PHP:

<input type='checkbox' name='pedir[]' id="<? echo $i;?>" onclick="required(<? echo $i;?>);" value='si'>
 

la función que intento usar es la siguiente:

Código Javascript:

function required(i){
            $("#und"+i).attr('required', true);  
        }
 

y el input al cual quiero asignar la propiedad required los declaro así;

Código PHP:

<input type="text" name="und[]" id='und<? echo $i;?>' class="caja" style="width:70%;" value="<? if(isset($und)){ echo $und[$i]; } ?>">
 

No sé cual pueda ser el error, como os dije, no sé mucho sobre este tema :(.
podrían ayudarme?

muchas gracias de ante mano a todos.

[Alexis88]

Cuando se marca o desmarca un checkbox, se produce el evento change. Una manera práctica de hacer lo que buscas consiste en delegar dicho evento a la tabla que contiene a todos los campos; luego, mediante la propiedad event.target, tomarías al elemento en el que se produjo el evento, que en este caso sería cada checkbox y como veo que su name es distinto a los de los campos de texto, solo tendrías que verificar que el nombre del elemento contenga la palabra "pedir". Cuando verifiques esto, solo te queda saber si el checkbox está marcado o desmarcado. Si está marcado, tomas a elemento padre del checkbox, que sería la celda, y de esta a su elemento padre, que sería la fila. En la fila, tomarías a todos los elementos cuyo nombre empiece por "und", recorrerías al conjunto resultante y les asignarías el atributo en cuestión. Si el checkbox está desmarcado, se los quitarías.

Código Javascript:

document.querySelector("#id de la tabla").addEventListener("change", function(event){
    if (event.target.name.indexOf("pedir") > -1){
        if (event.target.checked){
            [].forEach.call(event.target.parentNode.parentNode.querySelectorAll("[name^=und]"), function(input){
                input.required = true;
            });
        }
        else{
            [].forEach.call(event.target.parentNode.parentNode.querySelectorAll("[name^=und]"), function(input){
                input.required = false;
            });
        }
    }
}, false);
 

Para futuras consultas:

• change
• .addEventListener()
• .indexOf()
• event.target
• .forEach()
• parentNode
• Selectores especiales
• .querySelectorAll()
• .querySelector()

Un saludo

[jmg1189]

Iniciado por Alexis88

Un saludo

hola alexis88, muchas gracias por tu pronta respuesta.
Intente de la siguiente forma, y me ha funcionado, te muestro y me dices que opinas, ya que supongo que pues puede haber una forma no tan poco práctica o no sé como llamarle jeje. mira:

el checkbox lo declaro así;

Código PHP:

<input type='checkbox' name='pedir<? echo $i?>' id="pedir<? echo $i;?>" onclick="asignar(<? echo $i;?>);" value='si'>
 

y la función que usé fue así;

Código Javascript:

function asignar(i){//funcion que asigna el valor required a las cajas de la fila donde se pulse el checkbox para solicitar un elemento.
            var x = i; 
            var elemento=document.getElementById("pedir"+x);
            if(elemento.checked){
                document.getElementById("und"+x).required=true; document.getElementById("cant"+x).required=true; document.getElementById("marca"+x).required=true;
                document.getElementById("ref"+x).required=true; document.getElementById("descripcion"+x).required=true; document.getElementById("proyecto"+x).required=true;
                document.getElementById("und"+x).disabled=false; document.getElementById("cant"+x).disabled=false; document.getElementById("marca"+x).disabled=false;
                document.getElementById("ref"+x).disabled=false; document.getElementById("descripcion"+x).disabled=false; document.getElementById("proyecto"+x).disabled=false;
                document.getElementById("comenta"+x).disabled=false;
            }else{
                document.getElementById("und"+x).required=false; document.getElementById("cant"+x).required=false; document.getElementById("marca"+x).required=false; 
                document.getElementById("ref"+x).required=false; document.getElementById("descripcion"+x).required=false; document.getElementById("proyecto"+x).required=false; 
                document.getElementById("und"+x).disabled=true; document.getElementById("cant"+x).disabled=true; document.getElementById("marca"+x).disabled=true;
                document.getElementById("ref"+x).disabled=true; document.getElementById("descripcion"+x).disabled=true; document.getElementById("proyecto"+x).disabled=true;
                document.getElementById("comenta"+x).disabled=true;
            }
        }
 

Admito que tal vez no es la mejor manera de hacerlo, puesto que como te indico, no es mucho lo que sé sobre javascript. Pero ha funcionado jeje.

muchas gracias por tu ayuda.

[Alexis88]

Es una forma válida. Como no lo indicaste en el código original, supuse que los nombres del resto de campos de texto empezaban por la misma palabra, pero como veo que no es así y si quieres probar con la forma que te propuse, puedes hacerlo así:

Código Javascript:

document.addEvenListener("DOMContentLoaded", function(){
    document.querySelector("#id de la tabla").addEventListener("change", function(event){
        if (event.target.name.indexOf("pedir") > -1){
            if (event.target.checked){
                [].forEach.call(event.target.parentNode.parentNode.querySelectorAll("input"), function(input){
                    input.required = true;
                });
            }
            else{
                [].forEach.call(event.target.parentNode.parentNode.querySelectorAll("input"), function(input){
                    input.required = false;
                });
            }
        }
    }, false);
}, false);
 

La ventaja de hacerlo de esta manera es que puedes tener N campos de texto y todos se verán afectados; además, así mantienes limpio tu código puesto que el código JavaScript ya no estará combinado con el HTML y si decidieras hacer algún cambio más adelante, solo tendrías que modificar el código del archivo JavaScript.

Un saludo

[jmg1189]

vale, muchas gracias alexis, se ve que sabes mucho del tema y agradezco enormemente tu ayuda. Probaré de la forma que me dices a ver que resultado tengo.

Mil gracias.