[Usabilidad] Click sobre label cuando trabajamos con input en desarrollo web

Cuando trabajamos desarrollando interfaces web, al igual que ocurre con cualquier otro diseño de interfaz, una de las labores básica es aumentar la usabilidad. Hay que hacer fácil y natural el funcionamiento.

Si tenemos un formulario, con una lista con botones de tipo radio o checkbox y al lado una serie de etiquetas label como aparece en la imagen:

• Es incómodo tener que presionar el control…
• … pudiendo presionar cualquier parte de la etiqueta para que se active el control

Hacer esto a mano, elemento a elemento, además de tedioso no es nada práctico, pero jQuery nos proporciona un método para hacerlo de una sola vez:

var labelID;

$('label').click(function() {
       labelID = $(this).attr('for');
       $('#'+labelID).trigger('click');
});

Recordad tener bien indicados el atributo for de cada label:

<label for="miboton"&mt;Mi botón</label&mt;
<input id="miboton"&mt;...