Habilitar problema con Javascript

Chuty · #1 (**permalink**) 17/03/2006, 14:10

Buenas a todos,
tengo el siguiente problema.
Tengo tres grupos de checkbox, el cual el primer grupo se habilita y deshabilita por medio de un radio , el segundo grupo tene la funcion de invertir y seleccionar todos y el tercero no importa no tiene que hacer ninguna funcion. El tema es que el primer grupo que tiene la funcion de habilitar o deshabilitar me deshabilita a todos les checkbox de la pantalla y no al grupo de el.
Por ejemplo este es codigo:

Código PHP:

  <SCRIPT LANGUAGE="JavaScript"> 

function seleccionar(grupo, estado) {

// grupo es el id contenedor

// estado es true/false

for (var i = 0, checks = document.getElementById(grupo).getElementsByTagName("input"), total = checks.length; i < total; i ++)

checks[i].checked = estado;

}

 
function invierte(grupo) { 

for (var i = 0, checks = document.getElementById(grupo).getElementsByTagName("input"), total = checks.length; i < total; i ++) 

checks[i].checked = !checks[i].checked;

}

</script>

 
// aca habilito y deshabilito, al deshabilitar me limpia los checkbox 

// seleccionados del grupo que son los A1 A2 A3 A4

<SCRIPT LANGUAJE="JavaScript">

function habilitaDeshabilita(form) {

  ele=form.elements;

  for(i=0;i<ele.length;i++)

    if(ele[i].type=='checkbox')

      ele[i].disabled=form.R1[0].checked;

      for (i=0; i<form.length; i++) {

        with (form.elements[i]) {

    if(className!='fieldset')

       if ( type == 'checkbox' ) { checked = false }

      }

  }

}

</SCRIPT>

 
<FORM NAME=formulario>

 
<input type="radio" value="Manual" name="R1" onClick="habilitaDeshabilita(this.form)">Manual 

<input type="radio" value="Automatico" checked name="R1" onClick="habilitaDeshabilita(this.form)">Automatico 

<DIV>

<input type="checkbox" name="A1" value="ON"> 

<input type="checkbox" name="A2" value="ON"> 

<input type="checkbox" name="A3" value="ON"> 

<input type="checkbox" name="A4" value="ON"> 

</DIV>

<input type="button" name="Bot1" value=" Todos " onClick='seleccionar("grupo1", true)' style="font-size: 8 pt" title="Seleccionar Todos" style="position: relative;  width: 70">&nbsp;&nbsp; 

<input type="button" name="Bot2" value="Invertir" onclick="invierte('grupo1')" style="font-size: 8 pt" title="Invertir Selección" style="position: relative;  width: 70">&nbsp;&nbsp; 

</td>

<div style=" OVERFLOW: auto; BORDER-LEFT: buttonshadow 1px; WIDTH: 650px; COLOR: windowtext; BORDER-BOTTOM: buttonhighlight 1px; SCROLLBAR-BASE-COLOR: buttonface; POSITION: relative; HEIGHT: 155px; BACKGROUND-COLOR: window" >

<fieldset id="grupo1">

<input type="checkbox" name="B1" value="ON"> 

<input type="checkbox" name="B2" value="ON"> 

<input type="checkbox" name="B3" value="ON"> 

<input type="checkbox" name="B4" value="ON"> 

</fieldset >

</div>

<DIV>

<input type="checkbox" name="C1" value="ON"> 

<input type="checkbox" name="C2" value="ON"> 

<input type="checkbox" name="C3" value="ON"> 

<input type="checkbox" name="C4" value="ON"> 

</DIV>

</FORM>

desde ya muchas gracias y saludos a todos

uamistad · #2 (**permalink**) 18/03/2006, 13:39

No pude entender bien tu código, pero me gustó tu ejemplo y creo que se puede optimizar muchísimo.

Por ejemplo, vi que tienes creo que 3 funciones que hacen el trabajo y eso bien lo puede hacer una sola función.

El código es prácticamente el mismo, pero la función cambia:

Código PHP:

  //
//

<html><head><title>CheckEle Agrupados</title></head>
<body><style>.formato {OVERFLOW: auto; BORDER-LEFT: buttonshadow 1px; WIDTH: 400px; COLOR: windowtext; BORDER-BOTTOM: buttonhighlight 1px; SCROLLBAR-BASE-COLOR: buttonface; POSITION: relative; HEIGHT: 50px; BACKGROUND-COLOR: window}</style>

<SCRIPT LANGUAGE="JavaScript">
function cambiaEle(grupo,accion){

    ele = document.formulario.elements;
    for(i=0;i<ele.length;i++)
        if(ele[i].type=='checkbox' && ele[i].name.substring(0,1)==grupo)
            switch(accion){
                case 'habilitar':        ele[i].disabled = false;    break;
                case 'deshabilitar':    ele[i].disabled = true;    break;
                case 'todos':            ele[i].checked = true;    break;
                case 'invierte':        ele[i].checked = (ele[i].checked == true)?false:true;    break;}
}//end function

</SCRIPT>

<FORM NAME="formulario">

<DIV class="formato">
<fieldset id="A"><legend>Grupo A</legend>
<input type="checkbox" name="A1" value="mmm..."> 
<input type="checkbox" name="A2" value="sale y vale"> 
<input type="checkbox" name="A3" value="see you later"> 
<input type="checkbox" name="A4" value="vale vale"> 
<input type="radio" name="R1" value="Deshabilitar" onClick="cambiaEle('A','deshabilitar')">Deshabilitar
<input type="radio" name="R1" value="Habilitar" onClick="cambiaEle('A','habilitar')" checked>Habilitar
</fieldset>
</DIV>

<div class="formato">
<fieldset id="B"><legend>Grupo B</legend>
<input type="checkbox" name="B1" value="saluddos"> 
<input type="checkbox" name="B2" value="sí sí"> 
<input type="checkbox" name="B3" value="no no"> 
<input type="checkbox" name="B4" value="ok oiko"> 
<input type="button" name="boton1" value="Todos" title="Seleccionar Todos" onClick="cambiaEle('B','todos')">&nbsp;&nbsp; 
<input type="button" name="boton2" value="Invertir" title="Invertir Selección" onClick="cambiaEle('B','invierte')">
</fieldset >
</div>

<div class="formato">
<fieldset id="C"><legend>Grupo C</legend>
<input type="checkbox" name="C1" value="algo"> 
<input type="checkbox" name="C2" value="otracosa"> 
<input type="checkbox" name="C3" value="una cosa más"> 
<input type="checkbox" name="C4" value="jajaja"> 
</fieldset>
</DIV>
</FORM>  

</body></html>

Suerte Chuty.