C# - JQuery - GridView, detectar selección checkbox

 

Introducción

La razón de este ejemplo es poder detectar la selección individual de cada checkbox introducido en una columna de la grilla y ante la marca de al menos un check poder habilita la acción de cierto un botón. Todo esto del lado del cliente.

 

Código JavaScript

Para esta operación nos ayudaremos de la librería jQuery.

La misma podrá apreciarse que ha sido incluida mediante la referencia de la primer línea del código del ejemplo.

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

    $().ready(function() {


        $("#<%=GridView1.ClientID%> :checkbox").click(function() {

            var seleccionado = false;

            $("#<%=GridView1.ClientID%> :checkbox").each(function() {

                if (this.checked)
                    seleccionado = true;

            });

            var botondeshabilitar = $("#<%=btnEnviar.ClientID%>");
            
            if (seleccionado)
                botondeshabilitar.removeAttr('disabled');
            else
                botondeshabilitar.attr('disabled', 'disabled');

        })


    });

</script>

La instrucción $().ready(function(){..}) (línea 5) nos brindara la seguridad que el código que incluyamos allí dentro será ejecutado ni bien este disponible el objeto document de javascript.

Esto es importante ya que dentro de este estamos accediendo a los controles y es necesario hacerlo de forma segura.

Con $(..).click(function(){}), (línea 8) estamos seleccionado todos los checkbox que contenga el grdiview, y adjuntando el evento click, debe recordarse que este evento se agregara a cada control checkbox de forma individual.

Cada vez que es presionado un checkbox se evalúan todos los check en conjunto para saber si hay algún otro seleccionado o no, en caso de haber uno se deje habilitado el botón, en cado de no quedar ninguno se deshabilita.

La forma de recorrer cada ítem seleccionado $().each(function(){}), (línea 12), evalúa el estado del check de ese ítem en particular modificando la variable que se encuentra declarada fuera de esta función. Debe remarcarse que el “this” que se usa dentro del each es un objeto de javascript clásico, no es un objeto de jquery, es por eso que se usa directamente la propiedad “checked”, esta es de javascript, no de jquery.

Algo que seguro se preguntaran es porque en la líneas 8 y 12 se realiza la misma selección y no se reemplaza la segunda por un this. Esto se debe a que al adjuntar el evento al click este lo hace de forma individual, razón por la cual es this dentro del click representa un solo control checkbox, y no todos, haciendo necesario nuevamente la selección, para poder realizar el ciclo y evaluación de estado.

Hay que mencionar que es importante la forma en como se selecciona los controles de asp.net usando <%=%> (ejemplo línea 19), como se notara al renderizar un control de asp.net este cambia el id asignado por otro, para que tenga el control un identificador único, es por eso que lo correcto al trabajar con controles se utilice la propiedad ClientID.

[C#]