IE7 & 8: .is(':checked') is ignored when hiding input buttons

Question

I have a form: http://jsfiddle.net/q2BnA/1/ . I want to be able to click on Option 1, and give focus to field1, click on Option 2, and give focus to field2. So, I have JQuery to do that. It works good, until I add this style:

input[type=checkbox], input[type=radio]  {
        display:none;
    }

Now I have a problem in IE8 and IE7 (I have to support them) - focus is not given. I am assuming it's because of this line: var option1 = $('#option1').is(':checked');

But I have to hide radio buttons because I am styling my own via:

input[type=radio] + label {
    /*look nice*/
}

How can I resolve this for IEs?

JQ

function focusThis() {
        var option1 = $('#option1').is(':checked');
        if (option1) {
            //alert(1);
            $('#field1').focus();
        } else {
            //alert(2);
            $('#field2').focus();
        }
    }

HTML

<form>
<fieldset><legend>Options</legend>
      <ul>
        <li><input type="radio" name="A" id="option1" onclick="focusThis();"><label for="option1">Option 1</label> 
            <label for="field1">Field 1</label><input id="field1"/></li>

        <li><input type="radio" name="A" id="option2" onclick="focusThis();"><label for="option2">Option 2</label>

            <fieldset id=""><legend></legend>
              <ul>
                <li><label for="field2">Field 2</label> <input id="field2"/></li>
                  <li><label for="field3">Field 3</label> <input id="field3"/></li>
              </ul>
          </fieldset>
         </li>
      </ul>
  </fieldset>
</form>

Our site is currently linking to jquery-1.8.2, but I can change that if other versions resolve that. — janeh, Jul 23 '13 at 16:46

score 1 · Answer 1 · answered Jul 23 '13 at 16:49

1

Then don't use display none, use this workaround:

input[type=checkbox], input[type=radio]  {
       position:absolute;
       left:-9999px;
       top:-9999px;
    }

DEMO

answered Jul 23 '13 at 16:49

A. Wolff

74,033
9
94
155

score 1 · Accepted Answer · answered Jul 23 '13 at 16:52

1

The problem is that display: none is slightly more than cosmetic, so you have to sidestep it.

How about putting the inputs inside the labels, hiding them with opacity: 0 (and the IE equivalent) instead, and making them occupy the full dimensions of their containers?

The new code is as follows:

<label for="option1">
    <input type="radio" name="A" id="option1" onclick="focusThis();">
    Option 1
</label>

…and for the CSS:

label {
    position: relative;
}

input[type=checkbox], input[type=radio]  {
    opacity: 0;
    /* IE 5-7 */
    filter: alpha(opacity=0);
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

Forked your demo here: http://jsfiddle.net/barney/M8nnb/1

answered Jul 23 '13 at 16:52

Barney

16,181
5
62
76

What would be the advantage of that vs shooting off the radio button display via `position:absolute; left:-9999px`? – janeh Jul 23 '13 at 17:13
Good question. 1) The negative box model indent results in calculating a huge extra piece of layout, [which has been known to negatively impact performance in some cases](http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/). 2) This behaviour effectively has the user interacting with the inputs directly (rather than implicitly, via their associated labels): [this can be more reliable](http://stackoverflow.com/questions/16747945/how-to-get-firefox-click-behaviour-to-work-properly-with-css-styled-checkbox-an). – Barney Jul 23 '13 at 18:09
@Barney your first link refers to text-indent which effectively could generate some performance issue. I could be wrong but i don't see how it could be related to the current case using position absolute. I don't really know how to do some benchmarks on it though. – A. Wolff Jul 23 '13 at 19:09
@roasted you're right, it's more fear than fact — and yes, there's a distinct difference between simply positioning something thousands of pixels off page and forcing the box model to occupy all those pixels. For a generic invisibility solution, I'd go for the HTML5 boilerplate [`.visuallyhidden`](https://gist.github.com/sousk/1280108) – Barney Jul 24 '13 at 09:20
@Barney This `.visuallyhidden` looks good. I'm thinking to use it for my future projects now that weighs on me some fear... ;) – A. Wolff Jul 24 '13 at 09:26
1

I was trying out both solutions. Using `left:-9999px; top:-9999px;` causes weird behavior in Firefox: when an input is selected, FF jumps to the top of the page. My form is long, so it's really annoying to be at the bottom checking options, and being bumped up to the top every button click I make. I think it's because it's jumping to original button, which is at -9999px (top in this case). If I set it to +9999px, it jumps to that side of the screen on every click! Not good. – janeh Jul 25 '13 at 16:51

score 0 · Answer 3 · edited May 23 '17 at 12:21

0

The focus on the current control is required for the click event.

Look at this thread: Changing Javascript Focus in onClick event?.

I'll suggest to use event.PreventDefault(); look at this answer in another thread: https://stackoverflow.com/a/1357151/335905

edited May 23 '17 at 12:21

Community

1
1

answered Jul 23 '13 at 16:49

celerno

1,367
11
30

IE7 & 8: .is(':checked') is ignored when hiding input buttons

3 Answers3