Ярлыки и скрытые поля в Internet Explorer (и jquery)

У меня возникли проблемы с проверкой скрытых флажков в IE. Это базовый html:

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

Это отлично работает, но если я скрою флажки, используя

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

или

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

Нажатие метки больше не проверяет флажок в IE. Конечно, он отлично работает в Firefox, Chrome и Safari.

Ответы

Ответ 1

Вы можете попробовать добавить onclick к ярлыку, чтобы обойти проблемы IE.

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

Если это не сработает, попробуйте вручную установить атрибут.

$('label').click(function() {
  var checkbox = $('#' + $(this).attr('for'));
  if (checkbox.is(':checked')) {
    checkbox.removeAttr('checked');
  } else {
    checkbox.attr('checked', 'checked');
  }
});

Ответ 2

Скрытые флажки не получают событий в версии IE ниже 9. Мое обобщенное решение выглядит следующим образом:

/* 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;
}

Не перемещайте входы влево или страница будет переходить в IE, когда вход получает фокус! .lt-ie8 - это класс, который указан в теге HTML для старых версий IE таким образом: (см. например: https://github.com/h5bp/html5-boilerplate/blob/master/index.html)

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

Но вы можете использовать свой предпочтительный метод, чтобы применить свойства во втором правиле только к старой версии IE. Применение правил через JS также должно работать, как вы, кажется, делаете.

Ответ 3

Лучший способ избежать этого - установить флажок абсолютно вверху: -1000px;

Ответ 4

Марк Дихельм: Скрытые флажки не получают событий в версии IE ниже 9.

В качестве варианта вместо visibility: hidden; или display: none используйте clip: rect(0 0 0 0);

Итак, вместо

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

или

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

используйте что-то вроде

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

и

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

Он работает в обычных браузерах и в IE8

Ответ 5

Это работало для меня в IE8:

<!--[if IE 8 ]>
<style>
  input[type=checkbox] {
     position: absolute;
     filter: alpha(opacity=0);
  }
</style>
<![endif]-->