IE 11 Bug - Image inside label inside form

Question

In IE11, the following piece of code will check the radio button as expected:

    &l         


        

Answer 1

This is a rather interesting find. I'll do a bit more research to determine whether or not I can identify a more root cause, but for the time being I have a couple suggestions.

Nest Your Input

This is a common convention used for associating inputs with labels. Given the input and the label are both inline, this doesn't affect the actual layout necessarily.

JavaScript Patch

Another option is to perform a click on the corresponding input when one didn't happen naturally. In this approach we setup a timeout to click after 100ms. Any click that happens otherwise will clear our timeout:

$("label[for]").each(function () {

    var timeout;
    var element = $("#" + $(this).attr("for"));

    $(this).on("click", function () {
        timeout = setTimeout(function () {
            element.click();
        }, 100);
    });

    element.on("click", function () {
        clearTimeout(timeout);
    });

});

Browsers that already work will clear the timeout, preventing a second click. Internet Explorer 11 will click via the timeout.

Demo: http://jsfiddle.net/CG9XU/

One caveat is that that solution only works for labels that were on the page when the case was ran. If you have forms coming in late (perhaps via ajax), you'll need to listen higher up on the DOM. The below example listens on the document level:

$(document).on("click", "label[for]", function () {

    var timeout;
    var element = $("#" + $(this).attr("for"));

    timeout = setTimeout(function () {
        element.click();
    }, 100);

    element.one("click", function () {
        clearTimeout(timeout);
    });

});

The label element accepts as its content type all phrasing elements, and this includes image elements. I'll keep looking into this, and will update this answer with any insight.