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.