Habilitar/Deshabilitar un combo mediante un checkbox.

pabloe9k · #1 (**permalink**) 15/10/2008, 13:36

Hola.
Necesito de la ayuda de ustedes, mis sabios compañeros de foro.
Necesito hacer una pavada y no se como.
En una paginita muy simple tengo una casilla tipo tilde y debajo un combo.
Lo que intento hacer es que ese combo permanezca deshabilitado ha menos que se tilde el checkbox.
Pero la onda es hacerlo sin recargar la página.

En código, una cosa así.

Código HTML:

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

<br/>

<select name="derivado_usuario" disabled>
	         
   <option value=" " selected></option>
   <option value="opcion1" selected>opcion1</option>
   <option value="opcion2" selected>opcion2</option>

</select></td>

Alguien puede ayudarme?
Muchas gracias!!

the_web_saint · #2 (**permalink**) 15/10/2008, 13:43

claro, usa el onclick del checkbox
llamas a una función que determine si esta checked el checkbox y si lo esta habilitas o deshabilitas el combo.

Por ejemplo:

document.getElementById('devivar').checked --> esto en un if, si es cierto es porque esta checked

y habilitas un elemento usando

document.getElementById('derivado_usuario').disabl ed=true --> si es tru lo deshabilitas, si es false lo habilitas

OJO: recuerda que debes colocarle id a los elementos html!!!!

pabloe9k · #3 (**permalink**) 15/10/2008, 14:01

Cita:

Iniciado por the_web_saint

claro, usa el onclick del checkbox
llamas a una función que determine si esta checked el checkbox y si lo esta habilitas o deshabilitas el combo.

Por ejemplo:

document.getElementById('devivar').checked --> esto en un if, si es cierto es porque esta checked

y habilitas un elemento usando

document.getElementById('derivado_usuario').disabl ed=true --> si es tru lo deshabilitas, si es false lo habilitas

OJO: recuerda que debes colocarle id a los elementos html!!!!

Espectacular!!!
Ahora, te puedo pedir que -por favor- me pases el código completo así lo copio y lo pego? Porque no la tengo muy clara.
Gracias, fenómeno!!!

the_web_saint · #4 (**permalink**) 15/10/2008, 14:57

Aquí está compañer@, no es distinto a lo que te dije. Solo debias unir las dos cosas.

Código PHP:

       
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function deshabilita()
{
    if(document.getElementById('derivar').checked)
    {
        document.getElementById('derivado_usuario').disabled=false;
    }
    else
    {
        document.getElementById('derivado_usuario').disabled=true;
    }
}
</script>
</head>

<body>
<input type="checkbox" name="derivar" id="derivar" value="ON" onclick="deshabilita()">

<br/>

<select name="derivado_usuario" id="derivado_usuario" disabled>
             
   <option value=" " selected></option>
   <option value="opcion1">opcion1</option>
   <option value="opcion2">opcion2</option>

</select>
</body>
</html>

pabloe9k · #5 (**permalink**) 15/10/2008, 15:40

Cita:

Iniciado por the_web_saint

Aquí está compañer@, no es distinto a lo que te dije. Solo debias unir las dos cosas.

Código PHP:

        
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script> 
function deshabilita() 
{ 
    if(document.getElementById('derivar').checked) 
    { 
        document.getElementById('derivado_usuario').disabled=false; 
    } 
    else 
    { 
        document.getElementById('derivado_usuario').disabled=true; 
    } 
} 
</script> 
</head> 
 
<body> 
<input type="checkbox" name="derivar" id="derivar" value="ON" onclick="deshabilita()"> 
 
<br/> 
 
<select name="derivado_usuario" id="derivado_usuario" disabled> 
              
   <option value=" " selected></option> 
   <option value="opcion1">opcion1</option> 
   <option value="opcion2">opcion2</option> 
 
</select> 
</body> 
</html>

Señor, lo suyo es simplemente magnánimo.
Te había entendido lo que me habías querido decir, pero no la tengo mucho con javascript, entonces te entiendo perfectamente cuando me hablabas de hacer un if y cambiarle las propiedades al combo, pero de ahí a hacerlo para mi era chino básico.
Nuevamente gracias por el código.
Saludos!!!