Clickable label not working in IE 8

Question

I\'ve got the following list item:

Answer 1

I tried some of the other solutions posted here and eventually amended them to get a working fix to your problem. My problem was similar, though the HTML looked a little different, with the LABEL tag wrapping both the image and the INPUT radio button.

The solution I include below will ensure that any onClick handlers fire correctly on the radio button itself. It also does this only once and not in browsers where the radio button label behaves normally.

This is the jQuery code I used to solve the problem in Internet Explorer 11:

$('LABEL > IMG').click(function () {
    var inputId = $(this).parents('LABEL:first').attr("for");
    if (inputId) $('#' + inputId).not(':checked').attr('checked', true).click();
});

The code above uses the jQuery method attr() to manipulate the checked property. If you're using jQuery 1.6 or higher you should modify this to use the jQuery method prop() instead.