[SOLUCIONADO] activar checkbox multiples

[ssras]

Hola.
tengo el siguiente problema, tengo una tabla que se genera dinamicamente:

Código HTML:

<table class="table table-striped custab">
    <thead>
        <tr>
            <th>Servicio</th>
            <th></th>
            <th style="text-align: center;">Normal</th>
            <th style="text-align: center;">Adulto Mayor</th>
            <th style="text-align: center;">Preferencial</th>
        </tr>
    </thead>
    <tbody><tr>
          <td>Pasajes</td>
          <td><input type="checkbox" id="ss" name="ss[8]"></td>
          <td align="center"><input type="checkbox" disabled=""></td>
          <td align="center"><input type="checkbox" disabled=""></td>
          <td align="center"><input type="checkbox" disabled=""></td>
         </tr>
       <tr>
           <td>Reclamos</td>
           <td><input type="checkbox" id="ss" name="ss[9]"></td>
           <td align="center"><input type="checkbox" disabled=""></td>
           <td align="center"><input type="checkbox" disabled=""></td>
           <td align="center"><input type="checkbox" disabled=""></td>
     </tr>
     </tbody></table> 

lo que quiero hacer con JAVASCRIPT O JQUERY es que haciendo clic en el checkbox con id="ss" me active solo los checkbox de la fila de la tabla.
espero alguien me pueda ayudar

[Alexis88]

Bienvenido a Foros del Web.

Para empezar, debes de evitar usar el mismo id en más de un elemento dentro del mismo documento; lo aconsejable es utilizar una clase, la cual sí puede repetirse.

Teniendo esto claro y dado a que, como bien mencionas, es una tabla generada de forma dinámica, te sugiero delegar el evento click al elemento que contenga a la tabla o al documento. Cuando se produzca dicho evento, tomas al elemento afectado por el mismo haciendo uso de la propiedad event.target, luego, tomas al elemento que lo contenga haciendo uso de la propiedad .parentNode repitiendo este proceso dos veces para tomar, primero, a la celda que contiene al elemento y luego a la fila (la cual contiene a la celda) y ya teniendo tomada a la fila, buscas y tomas al conjunto de cajas de texto que contenga, lo recorres y habilitas a cada elemento.

Código Javascript:

document.addEventListener("click", function(event){
    if (event.target.className == "la clase"){
        var checkbox = event.target,
            celda = checkbox.parentNode,
            fila = celda.parentNode,
            inputs = fila.querySelectorAll("input");
        [].forEach.call(inputs, function(input){
            input.disabled = false;
        });
    }
}, false);
 

Un saludo

[ssras]

Gracias por tu respuesta Alexis88

me funciono la solucion que me diste, lo unico que hice fue modificar en tu solucion para que cuando se quite el check del checkbox los otros checkbox se desactiven, quedando como lo muestro a continuacion.

Código:

document.addEventListener("click", function(event){
        if (event.target.className == "activador"){
            var checkbox = event.target,
            celda = checkbox.parentNode,
            fila = celda.parentNode,
            inputs = fila.querySelectorAll("input");
            if (checkbox.checked){
                [].forEach.call(inputs, function(input){
                    input.disabled = false;
                });
            }else{
                [].forEach.call(inputs, function(input){
                    input.disabled = true;
                });
            }
               
            
        }
    }, false);

gracias por tu ayuda...

[Alexis88]

Supuse que querías algo así, pero como usaste checkbox en lugar de radiobutton, pensé que el mecanismo consistiría en permitir al usuario activar cada fila a la vez. Recuerda que para eso son los checkbox, para darle al usuario la posibilidad de marcas varias opciones a la vez, de otro modo, mejor usar radiobutton. Las cosas se simplificarían.

[ssras]

Código HTML:

document.addEventListener("click", function(event){
        if (event.target.className == "activador"){
            var checkbox = event.target,
            celda = checkbox.parentNode,
            fila = celda.parentNode,
            inputs = fila.querySelectorAll("input");
            if (checkbox.checked){
                [].forEach.call(inputs, function(input){
                    input.disabled = false;
                });
            }else{
                [].forEach.call(inputs, function(input){
                    input.disabled = true;
                });
            }    
            checkbox.disabled = false;
        }
    }, false);

al final lo deje de esta manera para que al desactivar el check del primer check (XD) este no quede desactivado.

Iniciado por Alexis88

Supuse que querías algo así, pero como usaste checkbox en lugar de radiobutton, pensé que el mecanismo consistiría en permitir al usuario activar cada fila a la vez. Recuerda que para eso son los checkbox, para darle al usuario la posibilidad de marcas varias opciones a la vez, de otro modo, mejor usar radiobutton. Las cosas se simplificarían.

disculpa, pero en que se simplifica si usaria radiobutton's? si el usuario debe poder activar y desactivar cualquier fila?? y cualquier columna??

[Alexis88]

Creo que entendí mal. Pensé que querías tener una fila activada y el resto desactivadas hasta que selecciones otro checkbox y habilites su fila y deshabilites las demás. Son cosas que pasan.