Labels and hidden fields in Internet Explorer (and jquery)

Question

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.

Answer 1

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');
  }
});