I've got something like

<div class="option">
<input type="checkbox" class="hideme" id="foo"/>
<label for="foo">Bar</label>
</div>

And of course in CSS I've got

.hideme { display: none }

Now, on Firefox, Chrome and Safari (haven't tried it on and am not worried about IE), clicking the label toggles the checkbox, as expected. And indeed, in Opera clicking the label toggles the non-hidden checkbox. But in Opera, clicking the label does NOT toggle the hidden checkbox.

What I'm trying to achieve here is basically to turn the "option" container into the visual portion of the checkbox, using jQuery to add/remove styling.

I can work around it by absolutely positioning the checkboxes off the screen rather than setting display to none, but this is inelegant... any ideas?

1 answer

1
point

If the browser doesn't want to do it for you, force it with jQuery.

$("label[for='foo']").click(function() {
    $("input#foo").toggle(
        function() {
            $(this).attr("checked", "checked");
        },
        function() {
            $(this).attr("checked", "");
        }
    );
});

Untested, but hopefully the idea makes sense.

Answered over 8 years ago by Adrian Lynch
  • not a bad idea, hurt wouldn't that result in a double toggle on browsers that worked already? Asmor over 8 years ago