It’s a common pattern to see a radio button inside a label in HTML5. It’s a very universal way to ensure that clicking the label will make the radio button select. This is of course assuming that your “for” and “id” match.

It is also a common practice to disable buttons on submit, especially on payment pages. In this case, I’m using the label as the button and hiding the radio button with CSS. When the form submits the label is disabled with the class and attribute.

I got in the habit at some point of using both the class and attribute because the class makes it look disabled and the attribute actually disables it in the browser. It’s a nice clean separation of presentation and functional logic.

I’ve known for sometime that IE doesn’t like hidden and disabled inputs. This shouldn’t be a problem. In my mind, I’m disabling a button. However, in IE11 they appear to have extended this to containing elements such as this label. When the form is submitted myradio is not in the data sent to the server. You can verify this by hitting F12. Even IE shows this field wasn’t POSTed to the server as part of the containing form. Note: I haven’t tested in earlier versions of IE.

In my case, the fix was to simply not use the disabled attribute on the label. I continued to use the disabled class. I now check the disabled class in any JavaScript that fires when the fancy label button is clicked.

Why IE doesn’t like disabled and hidden inputs, I’ll never know. It seems like stupid logic to me. My logic flows more like if a field is in a form, it should submit when the form submits. If I want a field to be ignored, I’ll completely remove it with JavaScript.

Share your dumb IE issues in the comments below.

Related Posts

Related Topics & Tags: General Information

About Ryan Johnston

As an Interactive Web Engineer at SmartFile, I mostly work with JavaScript and a little Python. Since we "eat our own dog food" here, I have quite a bit of experience using the SmartFile API that powers the User Interface in the SmartFile Web Application.

Leave a Reply

Your email address will not be published. Required fields are marked *