Nuevamente por una pregunta de grupo de noticias de ASP.NET, que también es común… de “Como deshabilitar del lado de cliente controles ASP.NET”
Esto es javascript así que uno tendría que incursionar en su lenguaje, como se instancia variables, búsqueda de controles y asignación de propiedades.
Dejo un ejemplo utilizando puro js y otro con una librería (framework javascript) que puede ser útil… UTIL (y es la recomendación)
La idea…
NOTA: Un pequeño retoque con estilos CSS para que cuando este deshabilitado el color de fondo sea gris.
<style type="text/css"> .disabled { background-color: #C0C0C0; /*color: gris*/ } </style>
OPCION 1: Clásica, puro js
Aqui vemos que tenemos un chekbox que lo recuperamos con el ID de cliente que tiene el webcontrol y dependiendo de eso lo deshabilitamos y cambiamos el estilo css
Para ocultarlo la propiedad es: visible y tambien display. Dejo abajo un enlace para que evalues cual de las dos necesitas (visible o display), pero la idea de ambos es que con una propiedad la ubicacion “fisica” utilizada por el control se mantiene y en otra se oculta completamente.function EjemploCheck(){ var chk = document.getElementById('<%= chkNumeroManual.ClientId %>'); var txt = document.getElementById('<%= ExpeNumero.ClientId %>'); if (chk.checked==true) { txt.disabled = false; txt.className = ''; txt.focus(); }else{ txt.disabled = true; txt.className = 'disabled'; }
Para utilizarlo en el evento onClick del chekbox tendrias que llamar a EjemploCheck, para el ejemplo1 utilice la funcion js llamanda “Ejemplo1”.Por codigo asignamos el comportamiento.
'Para ejemplo 1 CheckBox1.Attributes.Add("onClick", "Ejemplo1();")Mis controles:
<asp:CheckBox ID="CheckBox1" runat="server" Text="Ejemplo 1" /> <asp:TextBox ID="TextBox1" runat="server" Enabled="false" CssClass="disabled"></asp:TextBox>
OPCION 1.1: Enviando controles como parametro de la funcion js
Se podria “generalizar” para tener un funcion js que no este sujeta a un control especifico.
La idea es enviarle como parametro los controles.<script language="javascript" type="text/javascript"> function Ejemplo2(chk, txt){ if (chk.checked==true) { txt.disabled = false; txt.className = ''; txt.focus(); }else{ txt.disabled = true; txt.className = 'disabled'; } } </script>
Asignamos el comportamiento de la funcion “Ejemplo2” al checkbox:'Para ejemplo 2 CheckBox2.Attributes.Add("onClick", "Ejemplo2(this, " & TextBox2.ClientID & ");")
Los controles (idem al anterior)
<asp:CheckBox ID="CheckBox2" runat="server" Text="Ejemplo 2" /> <asp:TextBox ID="TextBox2" runat="server" Enabled="false" CssClass="disabled"></asp:TextBox>
OPCION 2: Utilizar librerias js: jQuery
Utilizando potentes y recomendable librerías de JavaScript, en esta oportunidad un ejemplo con jQuery
Este ejemplo hace lo mismo que el de arriba, pero sin necesidad de escribir nada mas… ni siquiera agregar el comportamiento por codigo al control (lo hacemos desde js)
(claro que necesitas descargar el script y asociarlo a tu pagina)
jQuery nos brinda mucha “asbtraccion” y tenemos mas simple algo que se nos hacia complejo manipular, por ejemplo los estilos CSS asociados a un control. Aqui con los metodos .addclass y .removeclass nos dan transparencia para la coleccion de clases css que puede poseer un control.
<script src="js/jquery-1.2.3.min.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(document).ready(function() { var chkNumeroManual = '#'+'<%= CheckBox3.ClientID %>'; var txtNumero = '#'+'<%= TextBox3.ClientID %>'; $(chkNumeroManual).click(function() { if($(chkNumeroManual).is(":checked")){ $(txtNumero).removeClass("disabled"); $(txtNumero).attr('disabled', false); }else{ $(txtNumero).addClass("disabled"); $(txtNumero).attr('disabled', true); } }); }); </script>Esta primera aproximación utilizamos el metodo .attr, pero podremos utilizar el metodo .disabled ya que el control acepta esta propiedad.
O sea:
Entonces la función js queda:
<script language="javascript" type="text/javascript"> $(document).ready(function() { var chkNumeroManual = '#'+'<%= CheckBox3.ClientID %>'; var txtNumero = '#'+'<%= TextBox3.ClientID %>'; $(chkNumeroManual).click(function() { if($(chkNumeroManual).is(":checked")){ $(txtNumero).removeClass("disabled"); //$(txtNumero).attr('disabled', false); $(txtNumero).disabled = true; }else{ $(txtNumero).addClass("disabled"); //$(txtNumero).attr('disabled', true); $(txtNumero).disabled = false; } }); }); </script>
Descargar ejemplo:
WebSite_DeshabilitarWebControl_VS2008.zip
{si no puedes visualizar la descarga click aquí}
Espero que te sirva de ayuda o guia
Enlaces:
- jQuery
http://jquery.com/ - Javascript: Display and Visibility
http://www.quirksmode.org/js/blockinvi.html
muy bueno . gracias
Yoda.NET, la verdad tengo que agradecer el post que hiciste. Me haz hecho ver la luz, donde solo veia oscuridad. Muy buen post.
Se agradece la info, muy buena!
Excelente ejemplo, muchas gracias por el aporte desde Medellin – Colombia
saludos ,
gracias por el post,
Excelente ejemplo, aprovecho y te hago una pregunta podria manipular con un codigo similar para que pueda habilitar o deshabilitar entre TextBox, es decir
tengo dos Textbox: «txt1» y «txt2», los dos en Enabled=true;
cuando de click sobre txt1 se deshabilite el txt2
y viceversa cuando de click sobre txt2 se deshabilite txt1, varias veces, es posible.
nota: ya intente con dos textbox, pero me funciona una sola vez
una vez mas gracias por el post….
espero me puedas ayudar con esta inquietud
saludoss…
bueno el ejemploo.
porfa para tengo el diguiente problema quiero habilitar las validaciones con un chekbox asp, y no entiendo la nparte en q llamas a tu funcion [CheckBox2.Attributes.Add(«onClick», «Ejemplo2(this, » & TextBox2.ClientID & «);»)]
espero puedas ayudarme y gracias de antemano .
chauuu
grasia por la ayuda muy faborable para los usuarios como yo
La verdad es q es un post mui bueno, muchas gracias!
Muchas gracias por el ejemplo, recien estoy empezando en esto de ASP, me podria decir como implementarlo en un GridView.
¡Bendiciones!
Hola @Ramon Romero, si estas empezando te recomiendo que tus inquitudes las plantees en el Foro de ASP.NET de MSDN
http://social.msdn.microsoft.com/Forums/es-ES/netfxwebes/threads
Porque es por aqui es un blog personal, te podria ayudar pero necesitas a veces respuestas mas rapida y en el foro hay muchas personas que ayudan, incluso lo puedes hacer tu.