Search code examples
jqueryhtmlinputlabellabel-for

label for .... not select its input ( sometimes )


It's something very very rare, but sometimes, when I select a label, its input is not selected. I have html like:

<td class="pleno_al_15 impar">
                    <label class="label_radio label_pleno activo" for="partido15-jugada1-cero" title="partido15-jugada1-cero">0</label>
                    <input class="radio_hidden" id="partido15-jugada1-cero" name="bets[0][14][0]" title="partido15-jugada1-cero" type="checkbox" value="0">

                    <label class="label_radio label_pleno activo" for="partido15-jugada1-uno" title="partido15-jugada1-uno">1</label>
                    <input class="radio_hidden" id="partido15-jugada1-uno" name="bets[0][14][1]" title="partido15-jugada1-uno" type="checkbox" value="1">

                    <label class="label_radio label_pleno activo" for="partido15-jugada1-dos" title="partido15-jugada1-dos">2</label>
                    <input class="radio_hidden" id="partido15-jugada1-dos" name="bets[0][14][2]" title="partido15-jugada1-dos" type="checkbox" value="2">

                    <label class="label_radio label_pleno activo" for="partido15-jugada1-m" title="partido15-jugada1-m">M</label>
                    <input class="radio_hidden" id="partido15-jugada1-m" name="bets[0][14][3]" title="partido15-jugada1-m" type="checkbox" value="M">                    
                </td>

Solution

  • I solved it by handling events with javascript.

    First at all, I want to explain better what was happening to me. I was hiding input tags, in order to the user only can select labels tags( which are images ), not input tags. So, sometimes, labels tags didn't activate its correspondent input tags.

    I solved it by adding this:

    $(".radio_hidden").bind("change", function () {
            $("#jab_contenido .label_radio").each(function(index, element) {
                if ($("#"+$(this).attr("for")).is(":checked")) $(this).addClass("activo");
                else $(this).removeClass("activo");
            });
        });
    

    The code above handle change event for input tags, and look for the correspondent label to add/remove class to display the image ( on/off ). So the on image will display only if the input tag is really checked.

    Hope that helps