La case à cocher ne sera pas cochée lorsque le libellé est cliqué

Jene saispas s'il s'agit d'unproblème spécifique à WordPress,mais lorsqueje crée unformulaire simpleen tant que widget dansmabarre latérale,la case à cocherne se vérifiepas lorsqueje clique sur l'étiquette. Curieusement,celafonctionne quandj'aiextrait lemêmeformulaire viaget_template_part dansmanavigation. Je veux utiliser le 'hack de case à cocher' qui repose sur lefait que l'étiquette soit cliquable. Monformulaire ressemble à:

 <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>Learn</label>
        <input id="fieldjtdktry-1" name="cm-fo-jtdktry" value="4469821" type="checkbox" /> <label for="fieldjtdktry-1"><span></span>Trade</label>
        <input id="fieldjtdktry-2" name="cm-fo-jtdktry" value="4469822" type="checkbox" /> <label for="fieldjtdktry-2"><span></span>Invest</label>
        <input id="fieldjtdktry-3" name="cm-fo-jtdktry" value="4469823" type="checkbox" /> <label for="fieldjtdktry-3"><span></span>Spend</label>
    </p>
    <p>
        <input id="fieldEmail" name="cm-jijiat-jijiat" type="email" required placeholder="Your email address" />
        <br />
        <button type="submit"><span>Subscribe</span></button>
    </p>
</form>
 

Les deuxformulairespeuvent êtretrouvés sur littlefishfx.com/contact,l'un sortant dubouton "S'abonner" dumenuprincipalet un autre (mêmeformulaire)touten bas de labarre latérale.

Des conseils sur les raisonspour lesquelles celapourrait seproduire? Mêmes résultats dans Chrome,Safariet Firefox (mac).

** MODIFIER **

Sij'enveloppemes cases à cocher dans le libellé comme

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

Ensuite,le clic sur l'étiquettefonctionne danstous les domaines. Cela ressemble à une solution demeilleurepratique (?) Maisme laisseperplexe quant à lafaçon d'utiliser le hack de case à cocher quej'essayaisinitialement d'implémenter. Voici le CSS sur lequelj'aitravaillé:

 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;
}
 

I'm not sure if this is a WordPress specific issue but when I create a simple form as a widget in my sidebar the checkbox won't check when I click on the label. Strangely though, it does work when I've pulled the same form via get_template_part into my navigation. I want to use the 'checkbox hack' which relies upon the label being clickable. My form looks like:

<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>Learn</label>
        <input id="fieldjtdktry-1" name="cm-fo-jtdktry" value="4469821" type="checkbox" /> <label for="fieldjtdktry-1"><span></span>Trade</label>
        <input id="fieldjtdktry-2" name="cm-fo-jtdktry" value="4469822" type="checkbox" /> <label for="fieldjtdktry-2"><span></span>Invest</label>
        <input id="fieldjtdktry-3" name="cm-fo-jtdktry" value="4469823" type="checkbox" /> <label for="fieldjtdktry-3"><span></span>Spend</label>
    </p>
    <p>
        <input id="fieldEmail" name="cm-jijiat-jijiat" type="email" required placeholder="Your email address" />
        <br />
        <button type="submit"><span>Subscribe</span></button>
    </p>
</form>

Both forms can be found at littlefishfx.com/contact, one dropping down out of the main menu 'subscribe' button and another (same form) at the very bottom of the sidebar.

Any advice on why this might be happening? Same results in Chrome, Safari and Firefox (mac).

** EDIT **

If I wrap my check boxes in the label like

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

Then label clicking works across the board. This looks a best practice solution (?) but leaves me stumped as to how to use the check box hack I was originally trying to implement. Here's the CSS that I've been working on:

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;
}