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

Question

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>

These kind of question are very difficult to answer as these aren't replicable all the time, even you have mentioned very-very rare.. — Guruprasad J Rao, Sep 16 '15 at 17:02
I'm confident this is a client-related issue. It can be the browser, its extensions, or even the hardware (mouse slowly dying) causing the issue. — Jeff Noel, Sep 16 '15 at 17:05
Hi, thanks for your comments. I understand that it can be due to a lot of causes, particular of each environment...but I solved it by handle events with js, so I publish my solution to can help others users. — Daniel Garcia Sanchez, Sep 17 '15 at 08:00

score 0 · Accepted Answer · answered Sep 17 '15 at 08:05

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

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

1 Answers1