Checkbox para habilitar/deshabilitar campos en un array

loki_gz · #1 (**permalink**) 23/08/2011, 11:09

Hola,

Después de buscar y buscar en este y otros foros a través de google, me rindo!

Necesito vuestra ayuda para ver si me podéis guiar en la solución del entuerto en el que me he metido. Os explico:

En un formulario tengo un array con 4 campos que se repiten n veces por medio de un loop. Estos campos recogen los datos de una BD de MYSQL y permite modificarlos y enviarlos de nuevo a través de un botón 'update'.

Lo que quiero es poner un checkbox antes del loop para activar o desactivar el primer campo (con esto pretendo evitar que se modifique ese campo cuando se desactive).

Un código javascript que he encontrado por internet me funciona si elimino el loop, pero deja de funcionar cuando se genera el array.

Bueno, os pongo el código a ver si así os queda más claro el tema, porque mis explicaciones no es que sean muy buenas.

Código HTML:

<table cellspacing="3">
        <tr valign="bottom">
          <td height="20" colspan="4" align="center"><input name="activo" type="checkbox" id="activo" onclick="if(this.checked==false)this.form.equipo.disabled=true;else this.form.equipo.disabled=false;"/></td>
        </tr>
        <tr valign="bottom">
          <td height="20" align="center">Local</td>
          <td colspan="2" align="center">Resultado</td>
          <td align="center">Visitante</td>
        </tr>
        <?php do { ?>
        <tr valign="baseline">
                <td align="left"><input name="Equipo[]" type="text" id="GolL[]" value="<?php echo $row_Partido['EquipoLocal']; ?>" size="1" maxlength="2" /></td>
                <td align="center"><input name="Goles[]" type="text" id="GolL[]" value="<?php echo $row_Partido['GolesLocal']; ?>" size="1" maxlength="2" /></td>
                <td align="center"><input name="Goles[]" type="text" id="GolV[]" value="<?php echo $row_Partido['GolesVisit']; ?>" size="1" maxlength="2" /></td>
          	<td align="right"><input name="Equipo[]" type="text" id="GolL[]" value="<?php echo $row_Partido['EquipoVisit']; ?>" size="1" maxlength="2" /></td>
        </tr>
        <?php } while ($row_Partido = mysql_fetch_assoc($Partido)); ?>
        <tr valign="baseline">
          <td colspan="4" align="center">				
            <input type="submit" value="Actualizar" />
          	<input type="hidden" name="MM_update" value="form_act" />
          </td>
        </tr>
      </table>

Lo que pretendo es activar o desactivar los campos "Equipo[]" para que sólo se puedan modificar los campos "Goles[]".

Creo que estoy en el foro correcto porque creo que el problema está en la función javascript que se ejecuta con el checkbox.

Espero vuestras aportaciones. Muchar gracias por adelantado

abimaelrc · #2 (**permalink**) 23/08/2011, 12:12

¿Algo así?

Código PHP:

  <html>
<head>
<script type="text/javascript">
/**
 * By Panino5001: http://forosdelweb.com/miembros/panino5001
 */
function addEvent(obj,type,fun){  
    if(obj.addEventListener){  
        obj.addEventListener(type,fun,false);  
    }else if(obj.attachEvent){  
        var f=function(){  
            fun.call(obj,window.event);  
        }  
        obj.attachEvent('on'+type,f);  
        obj[fun.toString()+type]=f;  
    }else{  
        obj['on'+type]=fun;  
    }  
}

/**
 * By somebody else ;-p
 */
window.onload = function(){
    obj = document.getElementsByName('enableDisableFoo[]');
    var n = 0;
    for(var i in obj){
        obj[i].num = n++;
        addEvent(obj[i], 'click', function(){
            objFoo = document.getElementsByName('foo[]')[this.num];
            if(this.checked){
                objFoo.disabled = true;
            }else{
                objFoo.disabled = false;
            }
        });
    }
}
</script>
</head>
<body>
<table>
    <tr>
        <td><input type="checkbox" name="enableDisableFoo[]" /></td>
        <td><input type="text" name="foo[]" value="foo1" /></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="enableDisableFoo[]" /></td>
        <td><input type="text" name="foo[]" value="foo2" /></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="enableDisableFoo[]" /></td>
        <td><input type="text" name="foo[]" value="foo3" /></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="enableDisableFoo[]" /></td>
        <td><input type="text" name="foo[]" value="foo4" /></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="enableDisableFoo[]" /></td>
        <td><input type="text" name="foo[]" value="foo5" /></td>
    </tr>
</table>
</body>
</html>

loki_gz · #3 (**permalink**) 24/08/2011, 05:13

Muchas gracias abimaelrc por responder tan rápido.

He probado el código que me has pasado y funciona perfectamente con el array, cosa que con los códigos que había probado hasta ahora no había conseguido.

Pero hay un problema. Tal como me has planteado la solución, necesitaría un checkbox para cada campo que quiera activar o desactivar. Yo, en cambio, quiero que con un único checkbox pueda activar o desactivar de un sólo clic todos los campos del array con el name="Equipo[]". ¿Se podrá hacer?

Lo siento, pero con javascript ando muy pez y no soy capaz de encontrar la solución por mi sólo.

abimaelrc · #4 (**permalink**) 24/08/2011, 14:33

¿Algo así?

Código PHP:

  <html>
<head>
<script type="text/javascript">
/**
 * By Panino5001: http://forosdelweb.com/miembros/panino5001
 */
function addEvent(obj,type,fun){  
    if(obj.addEventListener){  
        obj.addEventListener(type,fun,false);  
    }else if(obj.attachEvent){  
        var f=function(){  
            fun.call(obj,window.event);  
        }  
        obj.attachEvent('on'+type,f);  
        obj[fun.toString()+type]=f;  
    }else{  
        obj['on'+type]=fun;  
    }  
}

/**
 * By somebody else ;-p
 */
window.onload = function(){
    obj = document.getElementsByName('enableDisableFoo')[0];
    addEvent(obj, 'click', function(){
        objFoo = document.getElementsByName('foo[]');
        for(var i in objFoo){
            objFoo[i].disabled = this.checked;
        }
    });
}
</script>
</head>
<body>
<input type="checkbox" name="enableDisableFoo" />
<table>
    <tr>
        <td><input type="text" name="foo[]" value="foo1" /></td>
    </tr>
    <tr>
        <td><input type="text" name="foo[]" value="foo2" /></td>
    </tr>
    <tr>
        <td><input type="text" name="foo[]" value="foo3" /></td>
    </tr>
    <tr>
        <td><input type="text" name="foo[]" value="foo4" /></td>
    </tr>
    <tr>
        <td><input type="text" name="foo[]" value="foo5" /></td>
    </tr>
</table>
</body>
</html>

Te recomiendo que leas un poco de javascript para que te puedas desenvolver.

loki_gz · #5 (**permalink**) 25/08/2011, 03:52

Muchas gracias abimaelrc, esto es exactamente lo que buscaba.

Seguiré tu consejo y intentaré aprender algo más de este lenguaje, aunque reconozco que de momento me supera.

yole · #6 (**permalink**) 04/01/2016, 12:00

Buenas tardes abimaelrc

Tratando de solucionar mi problema he dado con tu post. (muy bueno por cierto)

En tu Script se deshabilitan al hacer click y yo necesito que se habiliten al hacer click.
No soy muy experto, trate de invertir la situación y no logro hacerlo.

Y a demás al probarlo no funciona. Será que me puedas dar una mano?

(mis input están dentro de un while)
y los campos son:

Código PHP:

Ver original<input type='text' name='idcarp[".$row3['idmg']."]' value='".$row2['idcarp']."' size='2' />
 
<input type='checkbox' name='compartirMG[".$row3['idmg']."]' value='si'";?> <?php if($row3['compartirMG']=='si'){echo "checked='checked' />";}?>

Muchas gracias de antemano.