Ver Mensaje Individual
  #5 (permalink)  
Antiguo 03/03/2005, 12:21
dark angel
 
Fecha de Ingreso: marzo-2005
Mensajes: 2
Antigüedad: 19 años, 11 meses
Puntos: 0
Deshabilitar controles de Formulario

Saludos.

Veras, todo el truco esta en jugar con la propiedad disabled (javascript) de los controles que quieres desactivar y ademas con el evento OnChange de la lista de selección.

Por ejemplo, aqui abajo te dejo un codigo, que genera una pagina simple con un select (con tres opciones) y tres campos de texto (en el formulario). Al seleccionar las opciones del select se activan y desactivan las cajas de texto (opcion 1 todas activas, opcion 2: desactivado el segundo texto; Opcion 3 desactivado texto 1 y 3)

Como vez en el OnChange del select llamo a la funcion CambiarFormulario esta segun el elemento seleciconado en la lista, activa/desactiva los textbox... por ejemplo con document.forms[0].Texto1.disabled=true; se desactiva el control Texto1

y con document.forms[0].Texto1.disabled=false; re reactiva el mismo control

Bueno el codigo completo es el siguiente:

Código:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script language="JavaScript">
function CambiarFormulario(){
	switch(document.forms[0].LISTA.selectedIndex){
		case 0: 
			document.forms[0].Texto1.disabled=false;
			document.forms[0].Texto2.disabled=false;	
			document.forms[0].Texto3.disabled=false;
			break;
		case 1: 
			document.forms[0].Texto1.disabled=false;
			document.forms[0].Texto2.disabled=true;	
			document.forms[0].Texto3.disabled=false;
			break;
		case 2: 
			document.forms[0].Texto1.disabled=true;
			document.forms[0].Texto2.disabled=false;	
			document.forms[0].Texto3.disabled=true;
			break;
	}
}

</script>

<body background="Design/BodyBackground.GIF" onLoad="CambiarFormulario();">
<form name="form1" method="post" action="">
  <p>Seleccion: 
    <select name="LISTA" id="LISTA" onChange="CambiarFormulario()">
      <option selected>Opcion 1</option>
      <option>Opcion 2</option>
      <option>Opcion 3</option>
    </select>
  </p>
  <p>Texto1 
    <input name="Texto1" type="text" id="Texto1">
    <br>
    Texto2 
    <input name="Texto2" type="text" id="Texto2">
    <br>
    Texto3 
    <input name="Texto3" type="text" id="Texto3">
  </p>
</form>
</body>
</html>

Espero que te sirva...

Por cierto, este foro esta excelente No se como no lo habia encontrado antes.

Saludos