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: 
    image
  • Deshabilitado:
    image

      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)

image 

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:

image

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:

10 comentarios en “Deshabilitar webcontrol ASP.NET mediante JavaScript puro y jQuery”

  1. 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

  2. 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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *