IE11 Not Submitting My Radio Button in Label

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.

<label for="myradio" class="btn btn-large btn-block btn-warning">    <input type="radio" value="1" name="myradio" id="myradio">    <span class="active-label hide-it">Selected</span>    <span class="inactive-label ">Select</span></label>

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.

SmartFile is a business file mangement platform that gives you more control, compliance and security.

TO SIGN UP