La casilla de verificación no se marca al hacer clic en la etiqueta

No estoy seguro si este es un problema específico de WordPress, pero cuando creo un formulario simple como widget en mi barra lateral, la casilla de verificación no se marca cuando hago clic en la etiqueta. Curiosamente, sí funciona cuando he insertado el mismo formulario mediante get_template_part en mi navegación. Quiero usar el 'truco del checkbox' que depende de que la etiqueta sea clickeable. Mi formulario se ve así:

<form action="http://email.littlefishfx.com/t/r/s/jijiat/" method="post">
    <p class="checks">
        <input id="fieldjtdktry-0" name="cm-fo-jtdktry" value="4469820" type="checkbox" /> <label for="fieldjtdktry-0"><span></span>Aprender</label>
        <input id="fieldjtdktry-1" name="cm-fo-jtdktry" value="4469821" type="checkbox" /> <label for="fieldjtdktry-1"><span></span>Comerciar</label>
        <input id="fieldjtdktry-2" name="cm-fo-jtdktry" value="4469822" type="checkbox" /> <label for="fieldjtdktry-2"><span></span>Invertir</label>
        <input id="fieldjtdktry-3" name="cm-fo-jtdktry" value="4469823" type="checkbox" /> <label for="fieldjtdktry-3"><span></span>Gastar</label>
    </p>
    <p>
        <input id="fieldEmail" name="cm-jijiat-jijiat" type="email" required placeholder="Tu dirección de email" />
        <br />
        <button type="submit"><span>Suscribirse</span></button>
    </p>
</form>

Ambos formularios se pueden encontrar en littlefishfx.com/contact, uno desplegándose desde el botón 'subscribe' del menú principal y otro (el mismo formulario) en la parte inferior de la barra lateral.

¿Algún consejo sobre por qué podría estar sucediendo esto? Los mismos resultados en Chrome, Safari y Firefox (mac).

** EDICIÓN **

Si envuelvo mis casillas de verificación en la etiqueta como

<label><input id="fieldjtdktry-0" name="cm-fo-jtdktry" value="4469820" type="checkbox" /><span></span>Aprender</label>

Entonces el clic en la etiqueta funciona en todos los casos. Esta parece ser una solución de mejores prácticas (?) pero me deja perplejo sobre cómo usar el truco de la casilla de verificación que estaba intentando implementar originalmente. Aquí está el CSS en el que he estado trabajando:

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: -1px 6px 0 0;
    vertical-align: middle;
    background: url(images/checkbox-sprite.gif) left top no-repeat;
    cursor: pointer;
}
input[type="checkbox"]:checked + label span {
    background: url(images/checkbox-sprite.gif) right top no-repeat;
}