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

非表示のチェックボックスは、9 未満の IE バージョンではイベントを受け取りません。私の一般化された解決策は次のとおりです。

/* 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]-->

ただし、2 番目のルールのプロパティを古い IE バージョンのみに適用するために、好みの方法を使用できます。あなたがやっているように、JSを介してルールを適用することもうまくいくはずです。

于 2012-03-07T13:26:53.823 に答える
12

IEの問題を回避するには、ラベルにonclickを追加してみてください。

$('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 に答える
0

これはIE8でうまくいきました：

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