Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Labels and hidden fields in Internet Explorer (and jquery)

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.

like image 257
Peter Duijnstee Avatar asked Jun 18 '10 19:06

Peter Duijnstee


3 Answers

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.

like image 60
Marc Diethelm Avatar answered Oct 20 '22 07:10

Marc Diethelm


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');
  }
});
like image 29
Nate Pinchot Avatar answered Oct 20 '22 07:10

Nate Pinchot


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

like image 3
pbcomm Avatar answered Oct 20 '22 07:10

pbcomm