[ASP.NET+jQuery] Gridview con checkbox limitando a un solo valor de selección

Si necesitamos tener un control checkbox en cada fila y que solo podamos seleccionar un sola fila a la vez (idem a un option)
Esto puede servir tanto para ASP.NET Webform como para MVC, con la salvedad de que depende de como renderizan las grillas de datos.
Gracias a una pregunta de los foros de MSDN de ASP.NET “Limitar selección Checkbox en GridView” tenia algo similiar en el borrador así que aquí va.

Si tenemos un Gridview con una columna template algo así:

<asp:GridView ID="GridView1" runat="server" 
        AutoGenerateColumns="False">
        <Columns>
            <asp:TemplateField HeaderText="Seleccion">
                 <ItemTemplate>
                     <asp:CheckBox ID="chkSeleccion" runat="server" CssClass="controlSeleccion" />
                 </ItemTemplate>
            </asp:TemplateField>  
            <asp:BoundField DataField="Nombre" HeaderText="Nombre" />
            <asp:BoundField DataField="FechaNacimiento" HeaderText="Fecha Nacimiento" />
        </Columns>
    </asp:GridView>

 

Cuando renderiza en ASP.NET 4.0 lo hace de esta manera

La tabla HTML La celda con el control
image image

Solución con jQuery: Evento .click()

Podriamos tener un selector en jQuery que tome todos los checkbox que están dentro de nuestra clase “controlSeleccion” y cada vez que se realiza un evento click (con mouse o sin el directamente con el teclado igualmente dispara el evento)

<script type="text/javascript">
   1:         $(function () {
   2:             $('.controlSeleccion input:checkbox').click(function () {
   3:                 $('.controlSeleccion input:checkbox').removeAttr('checked');
   4:                 $(this).attr('checked', true);
   5:             });
   6:         });    

</script>

NOTA: El selector :checkbox es identico a [type=checkbox]

Solución con jQuery: Atachando el evento con .on() (nuevo en jQuery 1.7)

En la version 1.7 de jQuery tenemos la sintaxis “.on()” para bindear a eventos (como lo eran live o bind, etc).

Nos quedaria algo asi para hacer lo anterior:

<script type="text/javascript">
   1:     $(function () {
   2:         $('.controlSeleccion input:checkbox').on('click', function () {
   3:             $('.controlSeleccion input:checkbox').removeAttr('checked');
   4:             $(this).attr('checked', true);
   5:         });
   6:     });    

</script>

 

Para otros post:

Mas adelante escribiré como hacer que este checkbox se comporte como el “comando de selección del gridview”, para que nos quede todo “un poco mas elegante”, ya que en este caso particular el desarrollador deberá “iterar” para buscar que control esta seleccionado. Una mejora seria que este control este enlazado a algun campo booleano del la colección de objetos

 

 

Espero que les sirva de ayuda o guía.

Deja un comentario

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