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>
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.
Share your dumb IE issues in the comments below.