Habilitar y Desabilitar campos INPUTTEXT y RADIO mediante un CheckBox

dosantos · #1 (**permalink**) 30/09/2009, 19:28

Hola amigos estoy haciendo un formulario, y estoy validando los campos INPUT Y RADIO, mi consulta es la siguiente:

Tengo 5 campos INPUTTEXT Y 5 PARES DE INPUTRADIO, osea un par para cada INPUTTEXT,
de los cuales 4 campos INPUTTEXT Y 4 PARES DE INPUTRADIO estan habilitados, y 1 INPUTTEXT Y un par de INPUTRADIO ESTAN DESABILITADOS, Y TENGO UN CHECKBOX Y QUISIERA SABER COMO PUEDO QUE AL SELECCIONAR EL CHECKBOX LOS 4 campos INPUTTEXT Y 4 PARES DE INPUTRADIO SE DESHABILITEN Y EL CHECKBOX Y EL PAR DE RADIOS SE HABILITEN, Y HA DESELECCIONAR EL CHECKBOX VUELVAN ALA NORMALIDAD.

Código HTML:




<body>
<FORM>
<INPUT name="selecionar" type="checkbox" value="V5">selecionar<br>
<input type="text" name="Materia1" size="3"  id="Materia4" disabled>
<INPUT type="radio" name="sexo1" value="V4" disabled>M
<INPUT type="radio" name="sexo1" value="V4"disabled>F<br> 
<input type="text" name="Materia2" size="3"  id="Materia5"disabled >
<INPUT type="radio" name="sexo2 value="V4"disabled >M
<INPUT type="radio" name="sexo2" value="V4">F<br> 
 <input type="text" name="Materia3" size="3"  id="Materia6"disabled>
<INPUT type="radio" name="sexo3" value="V4" disabled>M
<INPUT type="radio" name="sexo3" value="V4" disabled>F <br> 
<input type="text" name="Materia4" size="3"  id="Materia5" disabled>
<INPUT type="radio" name="sexo4" value="V4" disabled>M
<INPUT type="radio" name="sexo4" value="V4" disabled>F<br> 
<input type="text" name="Materia5" size="3"  id="Materia6">
 <INPUT type="radio" name="sexo5" value="V4">M
<INPUT type="radio" name="sexo5" value="V4" >F 
</FORM>
</body>

muchas gracias por su atencion!!

gracias adelanatdas!!

loncho_rojas · #2 (**permalink**) 30/09/2009, 19:35

Espero te sirva esta referencia

Código HTML:

<script type="text/javascript">
 
      function swap(bool) {
 
          bool = (!bool ? true : false);
 
          return(bool);
  
      }

       

      function cambiar(valor,array) {
 
      for (var i=0; i<array.length; i++) {
  
          array[i].disabled = swap(valor);
  
          }
 
      }

       
 
      window.onload = function() {
  
      var elcheck = document.getElementsByName('micheck')[0].checked = false;
  
      radios = document.getElementsByName('miradio');
 
      cambiar(false,radios);
 
      }</script>
<form name="formulario">
<input type="checkbox" name="micheck" onClick="cambiar(this.checked,radios);">
<b>Frutas</b>
<input type="radio" name="miradio" value="manzanas"> Manzanas
<input type="radio" name="miradio" value="peras"> Peras
<input type="radio" name="miradio" value="peras"> cambur
</form>

aca hay otra, pero que bloquea campos de forms.. justo acabo de tener una ayuda al respecto:

Código HTML:

<html>
	<head>

		<title>Buscar Avanzado</title>

		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

	</head>
     <script>
		function bloqueados(){
				
				document.form1.nombre.disabled = true
				document.form1.ciudad.disabled = true
				document.form1.edad.disabled = true
				}
		
		function bloquea() {
		
			if (document.form1.radio[0].checked) {
				document.form1.nombre.disabled = false
				document.form1.ciudad.disabled = false
				document.form1.edad.disabled = true
				document.form1.edad[document.form1.edad.selectedIndex].value=""
				
			}

			if (document.form1.radio[1].checked) {
			document.form1.nombre.disabled = false
			document.form1.edad.disabled = false
			document.form1.ciudad.disabled = true
			document.form1.ciudad[document.form1.ciudad.selectedIndex].value=""
			}
}
</script>

<body onLoad="bloqueados();">
<p>Seleccione una combinaci&oacute;n.
<p>Obs: Solo puede elegir una de ellas para filtrar los datos
    
   
    
<form name="form1" method="post" action="hola.php">
  <table width="558" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td>Combinar solo</td>
            <td>&nbsp;</td>
            <td><input name="radio" type="radio" value="" onClick="bloquea()">
            nombre + ciudad            </td>
            <td>&nbsp;</td>
            <td><input name="radio" type="radio" value="" onClick="bloquea()">
              Nombre +Edad</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td width="144" bgcolor="#CCCCCC"><span class="style10">Nombre:</span>
            <input name="nombre" type="text" id="nombre"></td>
            <td width="21" bgcolor="#CCCCCC">&nbsp;</td>
            <td width="187" bgcolor="#CCCCCC">+ Ciudad:
              <select name="ciudad" id="ciudad">
                <option value="0">-- Seleccione un Ciudad --</option>
                <option value="1">Ciudad 1</option>
                <option value="2">Ciudad 2</option>
              </select></td>
            <td width="37" bgcolor="#CCCCCC">&nbsp;</td>
            <td width="158" bgcolor="#CCCCCC">+Edad:
              <select name="edad" id="edad">
                <option value="0">-- Seleccione edad --</option>
                <option value="1">Edad 17</option>
                <option value="2">Edad 18</option>
                <option value="3">Edad 19</option>
                <option value="4">Edad 20</option>
              </select></td>
            <td width="137">&nbsp;</td>
          </tr>
              
          <tr>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td bgcolor="#CCCCCC">&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td width="144" bgcolor="#CCCCCC">&nbsp;</td>
            <td width="21" bgcolor="#CCCCCC">&nbsp;</td>
            <td width="187" bgcolor="#CCCCCC">&nbsp;</td>
            <td width="37" bgcolor="#CCCCCC">&nbsp;</td>
            <td width="158" bgcolor="#CCCCCC"><input name="Submit" type="submit" value="encontrar"></td>
            <td width="137">&nbsp;</td>
          </tr>
  </table>
</form>
      
      </body>
</html>

ceSharp · #3 (**permalink**) 01/10/2009, 00:58

Otra alternativa,

Puedes agrupar en <div> los cuatro primeros input-text junto a los input-radio y el otro input-text y par de input-radio en otro <div> a los que asiganarás un id (grupo1 y grupo2, por ejemplo). si a tu input-check le asignas una función que comprueba si está checkeado o no puedes habilitar/deshabilitar tus grupos más facilmente:

---------------------------------------
(codigo js)
function comprobarGrupos()
{
var grupo1 = document.getElementById('grupo1');
var grupo2 = document.getElementById('grupo2');
var check = document.getElementById('seleccionar');

if(check.checked)
{grupo1.disabled = true;grupo2.disabled = false;}
else
{grupo1.disabled = false;grupo2.disabled = true;}
}
---------------------------------------------
en el body también debes ejecutar esta función en el onLoad

salu2