La checkbox Bootstrap no funciona correctamente

Estoy usando las siguientes marcas y estilos (Bootstrap). Muestra mi checkbox pero está paralizada, es decir, no se puede marcar. Aquí está mi marca: quiero algo más Bootstrap-ish. Sé que hay otras opciones para hacer que la checkbox se vea elegante pero que no resuelva el problema.

Si no tiene una respuesta o incluso una sugerencia para compartir, resista la tentación de cerrarla o votarla por diversión.

1.

Así es como se ve.

casilla de verificación no funciona

¿Cuál es exactamente el problema? Si pongo el elemento de entrada dentro de la etiqueta, obtengo esta cosa fea:

introduzca la descripción de la imagen aquí

Al leer alrededor parece que tienes que diseñar la versión marcada y la versión no seleccionada.

 input[type=checkbox]:checked { } 

El estilo con esta etiqueta debe resolver sus problemas.

Las apariencias deben modificar el estilo de arranque para la checkbox personalizada.

Mira esto

HTML

 

CSS

 .fake-input { float: left; width: 20px; height: 20px; border: 1px solid #9f9f9f; background: #fff; vertical-align: middle; position: relative; margin-right: 10px; border-radius: 4px; } input[type="checkbox"] { position: fixed; top: -9999px; left: -9999px; } input[type="checkbox"]:checked + .fake-input:before { content:"\2713"; position: absolute; color: #000; text-align: center; top: 0; left: 0; right: 0; bottom: 0; } 

Compruebe en Fiddle

   

El problema es con su etiqueta. El atributo for debe coincidir con el atributo de nombre de su etiqueta