La checkbox non si seleziona quando si clicca sull'etichetta

Non sono sicuro che sia un problema specifico di WordPress, ma quando creo un semplice form come widget nella sidebar, la checkbox non si seleziona quando clicco sull'etichetta. Stranamente però, funziona quando ho inserito lo stesso form tramite get_template_part nella navigazione. Voglio utilizzare il 'checkbox hack' che si basa sul fatto che l'etichetta sia cliccabile. Il mio form è così strutturato:

<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>Impara</label>
        <input id="fieldjtdktry-1" name="cm-fo-jtdktry" value="4469821" type="checkbox" /> <label for="fieldjtdktry-1"><span></span>Fai Trading</label>
        <input id="fieldjtdktry-2" name="cm-fo-jtdktry" value="4469822" type="checkbox" /> <label for="fieldjtdktry-2"><span></span>Investi</label>
        <input id="fieldjtdktry-3" name="cm-fo-jtdktry" value="4469823" type="checkbox" /> <label for="fieldjtdktry-3"><span></span>Spendi</label>
    </p>
    <p>
        <input id="fieldEmail" name="cm-jijiat-jijiat" type="email" required placeholder="Il tuo indirizzo email" />
        <br />
        <button type="submit"><span>Iscriviti</span></button>
    </p>
</form>

Entrambi i form si trovano su littlefishfx.com/contact, uno che si apre dal pulsante 'subscribe' del menu principale e un altro (lo stesso form) in fondo alla sidebar.

Qualche consiglio sul perché potrebbe succedere? Stessi risultati in Chrome, Safari e Firefox (mac).

** MODIFICA **

Se racchiudo le mie checkbox nell'etichetta così:

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

Allora il click sull'etichetta funziona ovunque. Questa sembra essere una soluzione di best practice (?) ma mi lascia perplesso su come utilizzare l'hack della checkbox che stavo cercando di implementare originariamente. Ecco il CSS su cui stavo lavorando:

/* Nascondi la checkbox originale */
input[type="checkbox"] {
    display:none;
}

/* Stile per lo span all'interno della label quando la checkbox non è selezionata */
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;
}

/* Stile per lo span all'interno della label quando la checkbox è selezionata */
input[type="checkbox"]:checked + label span {
    background: url(images/checkbox-sprite.gif) right top no-repeat;
}