Login/Register
Labels and hidden fields in Internet Explorer (and jquery)
Asked Answered
Solved jquerycheckboxinternet-explorerlabelhidden
T

5

15

I'm having trouble checking hidden checkboxes in IE. This is the base html:

<input id="groups_ids_1" name="group_ids[]" type="checkbox" value="1" />
<label for="groups_ids_1">Display</label>

This works fine, but if I then hide the checkboxes using either

$('input[type=checkbox]').hide();

or

$('input[type=checkbox]').css('visibility', 'hidden');

Clicking the label no longer checks the checkbox in IE. Of course it works fine in Firefox, Chrome and Safari.

Tran answered 18/6, 2010 at 19:27 Comment(0)
B
12

You could try added an onclick to the label to get around the IE issues.

$('label').click(function() {
  $('#' + $(this).attr('for')).click();
});

If that does not work, try setting the attribute manually.

$('label').click(function() {
  var checkbox = $('#' + $(this).attr('for'));
  if (checkbox.is(':checked')) {
    checkbox.removeAttr('checked');
  } else {
    checkbox.attr('checked', 'checked');
  }
});
Briefing answered 18/6, 2010 at 19:40 Comment(2)
I was hoping for some way to avoid this as I was using the .changed callback for my checkbox fields, and this felt a bit hacky. But after some experimenting it seems to be the only workaround. Thanks for your reaction :) – Tran
Note that this might trigger the checkbox change 2 times on other browsers – Chinua
T
13

Hidden checkboxes don't receive events in IE version below 9. My generalized solution is as follows:

/* hide checkboxes */
input[type=checkbox] {
    visibility: hidden;
    position: absolute; /* move out of document flow */
}
/* ie8-: hidden inputs don't receive events, move out of viewport */
.lt-ie9 input[type=checkbox] {
    visibility: visible;
    top: -50px;
}

Don't move the inputs to the left or the page will jump in IE when the input receives focus! .lt-ie8 is a class that is set on the HTML tag for old IE versions in this manner: (see eg: https://github.com/h5bp/html5-boilerplate/blob/master/index.html)

<!--[if IE 8]>  <html class="no-js lt-ie9" lang="en"> <![endif]-->

But you can use your preferred method in order to apply the properties in the second rule to old IE version only. Applying the rules via JS should work too, as you seem to be doing.

Transported answered 7/3, 2012 at 13:26 Comment(1)
This is a much better answer than the accepted one, also worth reading what the jquery devs had to say about the issue, here: bugs.jquery.com/ticket/8508 – Aric
B
12

You could try added an onclick to the label to get around the IE issues.

$('label').click(function() {
  $('#' + $(this).attr('for')).click();
});

If that does not work, try setting the attribute manually.

$('label').click(function() {
  var checkbox = $('#' + $(this).attr('for'));
  if (checkbox.is(':checked')) {
    checkbox.removeAttr('checked');
  } else {
    checkbox.attr('checked', 'checked');
  }
});
Briefing answered 18/6, 2010 at 19:40 Comment(2)
I was hoping for some way to avoid this as I was using the .changed callback for my checkbox fields, and this felt a bit hacky. But after some experimenting it seems to be the only workaround. Thanks for your reaction :) – Tran
Note that this might trigger the checkbox change 2 times on other browsers – Chinua
A
3

The best way to avoid this, is to position the checkbox absolutely at top: -1000px;

Astra answered 9/1, 2012 at 17:36 Comment(0)
H
2

Marc Diethelm : Hidden checkboxes don't receive events in IE version below 9.

As variant, instead visibility: hidden; or display: none, use clip: rect(0 0 0 0);

So instead 

$('input[type=checkbox]').hide();

or

$('input[type=checkbox]').css('visibility', 'hidden');

use something like

$('input:checkbox').addClass('hidden');

and

input[type=checkbox].hidden {
    clip: rect(0 0 0 0);
    position: absolute; /* move out of document flow */
}

It works in normal browsers and in IE8

Hillary answered 23/8, 2013 at 12:43 Comment(1)
No, this is not "elegant". Why, because it applies a hack/workaround to all browsers forever. Even though all modern browsers of course support the correct behavior with visibility: hidden. You can be very sure that applying clip is a lot(!) more computationally expensive than the default solution. – Transported
S
0

This worked for me in IE8:

<!--[if IE 8 ]>
<style>
  input[type=checkbox] {
     position: absolute;
     filter: alpha(opacity=0);
  }
</style>
<![endif]-->
Snowber answered 30/6, 2013 at 20:15 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.