15

我无法检查 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 中运行良好。

4

5 回答 5

13

隐藏的复选框在 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是以这种方式在旧 IE 版本的 HTML 标记上设置的类：（参见例如：https ://github.com/h5bp/html5-boilerplate/blob/master/index.html ）

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

但是您可以使用您喜欢的方法，以便仅将第二条规则中的属性应用于旧 IE 版本。正如您似乎正在做的那样，通过 JS 应用规则也应该有效。

于 2012-03-07T13:26:53.823 回答
12

您可以尝试在标签上添加一个 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');
  }
});
于 2010-06-18T19:40:35.613 回答
3

避免这种情况的最佳方法是将复选框绝对放在顶部：-1000px;

于 2012-01-09T17:36:57.623 回答
2

Marc Diethelm：隐藏的复选框在 9 以下的 IE 版本中不接收事件。

作为变体，使用visibility: hidden;or代替display: noneclip: 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

于 2013-08-23T12:43:41.670 回答
0

这在 IE8 中对我有用：

<!--[if IE 8 ]>
<style>
  input[type=checkbox] {
     position: absolute;
     filter: alpha(opacity=0);
  }
</style>
<![endif]-->
于 2013-06-30T20:15:36.090 回答