Cuando una etiqueta solo tiene un botón, un clic de botón no (¿totalmente?) Activa la etiqueta

Tengo dos input s de tipo radio . Para cada input hay una label correspondiente con un solo button interior.

Esperaba que hacer clic en el botón tendría el mismo efecto que hacer clic en la etiqueta: que se verificara la entrada correspondiente.

Sin embargo, esto no sucede. Como se muestra en el siguiente fragmento de código, al presionar el botón y presionar los botones se activan los cambios de estilo correspondientes en los botones de radio, pero la acción de clic no selecciona la entrada, incluso aunque las tags simples funcionen como se espera.

He comprobado que los button son hijos legales de las label . Las tags permiten el Contenido de Fraseo, y los botones son Contenido de Fraseo , por lo que todo debería estar bien allí.

También he intentado agregar un detector de eventos a los eventos de clic de ambos botones, y dentro de ellos se llama event.preventDefault() , solo para asegurarme de que el comportamiento predeterminado del botón no impidiera que el evento llegara a la etiqueta, pero En vano, la etiqueta está recibiendo el evento.

Dado que esto parece ser consistente en todos los navegadores (Probado en Firefox 41a y Opera 31b / Chrome 44):

  1. ¿Qué está pasando aquí que me estoy perdiendo?
  2. ¿Cómo puedo implementar esto sin engaños (como diseñar la etiqueta como si fuera un botón)?
 

  1. Una label solo puede asociarse con un control de formulario a la vez. Esto se evidencia por el hecho de que el atributo for apunta a un elemento con un atributo de ID coincidente.

    Tienes un button que es un descendiente de tu label ; La interpretación esperada de esto es que la label sirve como etiqueta para el button . Sin embargo, está intentando asociar el botón de opción , no el elemento del button , con la label . El problema real aquí es que existe un conflicto entre los controles de formulario y la label ; es incapaz de averiguar a qué control se debe asociar.

    Supongo que el hecho de que el botón de opción no funcione correctamente es un efecto secundario de esto. Tal vez se deba a algún comportamiento de activación tanto en el botón de opción como en el elemento del button .

    He comprobado que los button son hijos legales de las label . Las tags permiten el Contenido de Fraseo, y los botones son Contenido de Fraseo, por lo que todo debería estar bien allí.

    Sin embargo, el validador produce el siguiente error con su marca:

    Error : cualquier button descendiente de un elemento de label con un atributo for debe tener un valor de ID que coincida con el de ese atributo.

    Esto se debe a que un elemento de label con un atributo for debe tener un control de formulario con ese valor de ID para que el atributo for apunte a, incluso si ese control es un descendiente de la label sí. Pero no puede asignar la misma ID a más de un elemento. El resultado es el conflicto mencionado.

  2. Sin saber qué es lo que intentas lograr aquí, el mejor consejo que puedo dar si solo quieres que la label tenga la apariencia de un botón es diseñarlo como tal.