<Jose A. Fernandez />

Deshabilitar webcontrol ASP.NET mediante JavaScript puro y jQuery

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…

• Habilitado: 
  
  
• Deshabilitado:
  

      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/
  
• BLOCKED SCRIPT Display and Visibility
  http://www.quirksmode.org/js/blockinvi.html

Published 7/7/2008 22:24 por José A. Fernández