发表新帖
发表新帖

Labels and hidden fields in Internet Explorer (and jquery)

前端 未结
关注
5 1785
日久生厌
日久生厌 2021-02-05 12:36

I\'m having trouble checking hidden checkboxes in IE. This is the base html:
相关标签:
5条回答
  • 借酒劲吻你
    2021-02-05 13:15

    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');
  }
});
    0 讨论(0)
  • 清歌不尽
    2021-02-05 13:17

    Marc Diethelm : Hidden checkboxes don't receive events in IE version below 9.

    As variant, instead visibility: hidden; or display: none, use clip: rect(0 0 0 0);

    So instead 

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

    or

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

    use something like

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

    and

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

    It works in normal browsers and in IE8

    0 讨论(0)
  • 孤城傲影
    2021-02-05 13:19

    The best way to avoid this, is to position the checkbox absolutely at top: -1000px;

    0 讨论(0)
  • 孤独总比滥情好
    2021-02-05 13:32

    Hidden checkboxes don't receive events in IE version below 9. My generalized solution is as follows:

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

    Don't move the inputs to the left or the page will jump in IE when the input receives focus! .lt-ie8 is a class that is set on the HTML tag for old IE versions in this manner: (see eg: https://github.com/h5bp/html5-boilerplate/blob/master/index.html)

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

    But you can use your preferred method in order to apply the properties in the second rule to old IE version only. Applying the rules via JS should work too, as you seem to be doing.

    0 讨论(0)
  • 后悔当初
    2021-02-05 13:35

    This worked for me in IE8:

    <!--[if IE 8 ]>
<style>
  input[type=checkbox] {
     position: absolute;
     filter: alpha(opacity=0);
  }
</style>
<![endif]-->
    0 讨论(0)
 看不清?
提交回复
热议问题