Метки и скрытые поля в Internet Explorer (и jquery) - PullRequest
Новая
       39

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

15 голосов
/ 18 июня 2010

У меня проблемы с проверкой скрытых флажков в 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.

Ответы [ 5 ]

13 голосов
/ 07 марта 2012

Скрытые флажки не принимают события в версии 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 также должно работать, как вы, кажется, делаете.

12 голосов
/ 18 июня 2010

Вы можете попробовать добавить клик на ярлык, чтобы обойти проблемы с 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');
  }
});
3 голосов
/ 09 января 2012

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

2 голосов
/ 23 августа 2013

Марк Дитхельм : Скрытые флажки не принимают события в 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

0 голосов
/ 01 июля 2013

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

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