Activacion de elementos con javascript y checkboxes

warbandit69 · #1 (**permalink**) 22/03/2010, 15:26

Hola foreros, gracias por leer mi post, tengo el siguiente formulario:

Código:

<form action="usuario_nuevo.php" method="post" name="form1" id="form1" onsubmit="MM_validateForm('usuario','','R','clave1','','R','clave2','','R','nombre','','R','apellido','','R','correo','','RisEmail');return document.MM_returnValue">
<table width="272" border="0" align="center">
  <tr>
    <td width="116" align="right">Usuario</td>
    <td width="146" align="left"><span id="sprytextfield1">
      <label>
        <input type="text" name="usuario" id="usuario" />
      </label>
      <span class="textfieldRequiredMsg">Se necesita un valor.</span></span></td>
  </tr>
  <tr>
    <td align="right">Clave *</td>
    <td align="left"><span id="sprypassword1">
      <label>
        <input type="password" name="clave1" id="clave1" />
      </label>
      <span class="passwordRequiredMsg">Se necesita un valor.</span></span></td>
  </tr>
  <tr>
    <td align="right">Confirme la Clave *</td>
    <td align="left"><span id="sprypassword2">
      <label>
        <input type="password" name="clave2" id="clave2" />
      </label>
      <span class="passwordRequiredMsg">Se necesita un valor.</span></span></td>
  </tr>
  <tr>
    <td align="right">Nombre</td>
    <td align="left"><span id="sprytextfield2">
      <label>
        <input type="text" name="nombre" id="nombre" />
      </label>
      <span class="textfieldRequiredMsg">Se necesita un valor.</span></span></td>
  </tr>
   <tr>
    <td align="right">Apellido</td>
    <td align="left"><span id="sprytextfield3">
      <label>
        <input type="text" name="apellido" id="apellido" />
      </label>
      <span class="textfieldRequiredMsg">Se necesita un valor.</span></span></td>
  </tr>
  <tr>
    <td align="right">Correo</td>
    <td align="left"><span id="sprytextfield4">
      <label>
        <input type="text" name="correo" id="correo" />
      </label>
      <span class="textfieldRequiredMsg">Se necesita un valor.</span></span></td>
  </tr>
  <tr>
    <td colspan="2" align="center">Oficina/Sede</td>
  </tr>
  <tr>
    <td colspan="2" align="center"><label>
      <input type="checkbox" name="sede1" id="sede1" onClick="marcar_sedes()"/>
    Oficina/Sede 
    <input type="checkbox" name="tecnico1" id="tecnico1" onClick="marcar_tecnicos()"/>
    Técnico 
    <input type="checkbox" name="cliente1" id="cliente1" onClick="marcar_clientes()" />
    Cliente</label></td>
  </tr>
  <tr>
    <td align="right">Oficina/Sede</td>
    <td align="left"><label>
      <select name="sedes2" id="sedes2" disabled="disabled">
     <option selected="selected">Select Office...</option>
       <?php      if (!$oficinas) 
			         print $db->ErrorMsg();
				else
					while (!$oficinas->EOF) {
						 echo "<option value=".$oficinas->fields[0].">".$oficinas->fields[1]."</option>";
				        $oficinas->MoveNext();
					} ?>
      </select>
    </label></td>
  </tr>
  <tr>
    <td align="right">Tecnico</td>
    <td align="left"><label>
      <select name="tecnicos2" id="tecnicos2" disabled="disabled">
      <option selected="selected">Select Technician...</option>
          <?php      if (!$tecnicos) 
			         print $db->ErrorMsg();
				else
					while (!$tecnicos->EOF) {
						 echo "<option value=".$tecnicos->fields[0].">".$tecnicos->fields[1]."</option>";
				        $tecnicos->MoveNext();
					} ?>
      </select>
    </label></td>
  </tr>
  <tr>
    <td align="right">Cliente</td>
    <td align="left"><label>
      <select name="cliente2" id="cliente2" disabled="disabled">
      <option selected="selected">Select Client...</option>
          <?php      if (!$clientes) 
			         print $db->ErrorMsg();
				else
					while (!$clientes->EOF) {
						 echo "<option value=".$clientes->fields[0].">".$clientes->fields[1]."</option>";
				        $clientes->MoveNext();
					} ?>
      </select>
    </label></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>
      <label>
        <input type="submit" name="button" id="button" value="Enviar" />
      </label>
      <label>
        <input type="reset" name="button2" id="button2" value="Restablecer" onClick="marcar_restablecer()"/>
      </label></td>
  </tr>
</table></form>

Y las siguientes funciones Javascript

Código:

function marcar_restablecer() {
		document.form1.sedes2.disabled=true;
		document.form1.tecnicos2.disabled=true;
		document.form1.cliente2.disabled=true;
		document.form1.tecnico1.checked = false;
		document.form1.cliente1.checked = false;
		document.form1.sede1.checked = false;
}
function marcar_sedes() {
	if(document.form1.sede1.checked){
		document.form1.sedes2.disabled=false;
		document.form1.cliente2.disabled=true;
		document.form1.tecnicos2.disabled=true;
		document.form1.cliente1.checked = false;
		document.form1.tecnico1.checked = false;
	} else {
		document.form1.sedes2.disabled=true;
		document.form1.tecnicos2.disabled=true;
		document.form1.cliente2.disabled=true;
		document.form1.tecnico1.checked = false;
		document.form1.cliente1.checked = false;
	}
}
function marcar_tecnicos(){
	if(document.form1.tecnico1.checked){
		document.form1.tecnicos2.disabled=false;
		document.form1.cliente2.disabled=true;
		document.form1.sedes2.disabled=true;
		document.form1.cliente1.checked = false;
		document.form1.sede1.checked = false;
	} else {
		document.form1.sedes2.disabled=true;
		document.form1.tecnicos2.disabled=true;
		document.form1.cliente2.disabled=true;
		document.form1.cliente1.checked = false;
		document.form1.sede1.checked = false;
	}
}
function marcar_clientes() {
	if(document.form1.cliente1.checked){
		document.form1.cliente2.disabled=false;
		document.form1.tecnicos2.disabled=true;
		document.form1.sedes2.disabled=true;
		document.form1.tecnico1.checked = false;
		document.form1.sede1.checked = false;
	} else {
		document.form1.sedes2.disabled=true;
		document.form1.tecnicos2.disabled=true;
		document.form1.cliente2.disabled=true;
		document.form1.tecnico1.checked = false;
		document.form1.sede1.checked = false;
	}
}

Pero sucede que solo un checkbox me funciona bien, los otros dos no, he pasado el dia revisando y parece todo bien , no se que mas hacer por eso recurro a la ayuda de ustedes los sabios foreros jaja.

Saludos, y gracias de nuevo.

Adler · #2 (**permalink**) 23/03/2010, 06:49

Hola

Creo que esto funcionará

Cambia los checkbox por radio, tal que así

Código HTML:

Ver original<td colspan="2" align="center"><label for="eleccion">
      <input type="radio" name="chbox[]" id="chbox[]" onClick="marcar()"/>
    Oficina/Sede 
    <input type="radio" name="chbox[]" id="chbox[]" onClick="marcar()"/>
    Técnico 
    <input type="radio" name="chbox[]" id="chbox[]" onClick="marcar()" />
    Cliente</label></td>
  </tr>

Las 3 últimas funciones se puede resumir en esto

Código Javascript:

Ver originalfunction marcar(ckb) {
var elemInput = document.getElementById("form1").getElementsByTagName("eleccion");
sel = document.getElementById("form1").getElementsByTagName("SELECT");
 
for(var i = 0; i < elemInput.length; i++){
var elem = elemInput[i].getElementsByTagName('input');
for(var j = 0; j < elem.length; j++){
if(elem[j].checked){
sel[j].disabled = false;
} else {
sel[j].disabled = true;
}
}
}
}

Suerte

warbandit69 · #3 (**permalink**) 23/03/2010, 07:03

Debo realizar alguna modificacion a ese codigo que me facilitaste? porque lo pegue tal como estaba y no funciona

Adler · #4 (**permalink**) 23/03/2010, 08:28

Hola

Veamos, prueba ahora

Código Javascript:

Ver originalfunction marcar() {
var elemInput = document.getElementById("eleccion").getElementsByTagName("input");
sel = document.getElementById("form1").getElementsByTagName("SELECT");
 
for(var j = 0; j < elemInput.length; j++){
if(elemInput[j].checked){
sel[j].disabled = false;
} else {
sel[j].disabled = true;
}
}
}

Código HTML:

Ver original<tr id="eleccion">
    <td colspan="2" align="center"><label for="chbox">
     <input type="radio" name="chbox[]" id="chbox[]" onclick="marcar();"/>
    Oficina/Sede 
    <input type="radio" name="chbox[]" id="chbox[]" onclick="marcar();"/>
    Técnico 
    <input type="radio" name="chbox[]" id="chbox[]" onclick="marcar();" />
    Cliente</label></td>
  </tr>

Suerte

Suerte

warbandit69 · #5 (**permalink**) 23/03/2010, 09:03

Gracias amigo eres un crack si funciono, seria mucho pedir que me explicaras mas o menos el funcionamiento de esta funcion javascript?

Adler · #6 (**permalink**) 24/03/2010, 07:41

Hola

Soy mas practico que teórico .... pero vamos a ello

Cita:

// Sacamos cada elemento "input" que hay dentro del elemento cuya id es "eleccion". De esta manera ya tienes todos los radios
var elemInput = document.getElementById("eleccion").getElementsByT agName("input");
// Esto es exactamente lo mismo que lo anterior pero ahora sacas todo los select que hay dentro del elemento "form2"
sel = document.getElementById("form1").getElementsByTagN ame("SELECT");

// Montas un ciclo para recorrer cada elemento, en este caso cada radio
for(var j = 0; j < elemInput.length; j++){
// Si en el recorrido encuentra un radio que este marcado
if(elemInput[j].checked){
// habilita el select cuyo subindice, es el mismo que el radio que esta marcado
sel[j].disabled = false;
} else {
sel[j].disabled = true;
}
}
}

Suerte