IE 11 Bug - Image inside label inside form - Need

问题:

Please don't mark this as a duplicate!

I've looked at these resources:

Image label for input in a form not clickable in IE11

IE 11 Bug - Image inside label inside form

https://snook.ca/archives/javascript/using_images_as

but am no closer to a solution so I've posted a full code example.

A radio button and image inside a label inside a form doesn't check in IE11.

I'm looking for a solution that preserves mouse/pointer events so the Javascript below still works.

Here is the full code example including CSS and Javascript which I am trying to make work in IE. It lets you click stars instead of radio buttons in a five star rating system. The stars light up when you hover over them. So if you hover over star three, it lights up stars one, two and three. Once you click a star, say star three, stars one, two and three will stay lit up, and the hovering highlighting functionality switches off. If you then click say star two, stars one and two will light up. This works beautifully in all browsers except IE. In IE, the radio button doesn't check.

Also I know the Javascript is repetitive and inelegant, but it's also relatively easy (for me, anyway) to understand.

Hoping to solve this bug for the internet once and for all!

CSS

.starRadioButton > input { /* HIDE RADIO */
  visibility: hidden; /* Makes input not-clickable (actually just hides it) */
  position: absolute; /* Remove input from document flow */
}

HTML

<form>

     <label class="starRadioButton">

          <input type="radio" name="Rating" value="1" />

          <img title="Poor" alt="1" class="starOne" src="~/Content/star-grey.png" />

     </label>


     <label class="starRadioButton">

          <input type="radio" name="Rating" value="2" />

          <img title="Fair" alt="2" class="starTwo" src="~/Content/star-grey.png" />

     </label>


     <label class="starRadioButton">

         <input type="radio" name="Rating" value="3" />

         <img title="Good" alt="3" class="starThree" src="~/Content/star-grey.png" />

     </label>


     <label class="starRadioButton">

         <input type="radio" name="Rating" value="4" />

         <img title="Very Good" alt="4" class="starFour" src="~/Content/star-grey.png" />

     </label>


     <label class="starRadioButton">

         <input type="radio" name="Rating" value="5" />

         <img title="Excellent" alt="5" class="starFive" src="~/Content/star-grey.png" />

     </label>                    

</form>

JAVASCRIPT

<script>


$(function ()
{
    $(".starOne").hover(function ()
    {
        $(".starOne").attr("src", "/Content/star-red.png");
    },
    function ()
    {
        $(".starOne").attr("src", "/Content/star-grey.png");
    }
    );
});

$(function ()
{
    $(".starTwo").hover(function ()
    {
        $(".starOne").attr("src", "/Content/star-red.png");
        $(".starTwo").attr("src", "/Content/star-red.png");
    },
    function ()
    {
        $(".starTwo").attr("src", "/Content/star-grey.png");
        $(".starOne").attr("src", "/Content/star-grey.png");            
    }
    );
});

$(function ()
{
    $(".starThree").hover(function ()
    {
        $(".starOne").attr("src", "/Content/star-red.png");
        $(".starTwo").attr("src", "/Content/star-red.png");
        $(".starThree").attr("src", "/Content/star-red.png");
    },
    function ()
    {
        $(".starThree").attr("src", "/Content/star-grey.png");
        $(".starTwo").attr("src", "/Content/star-grey.png");
        $(".starOne").attr("src", "/Content/star-grey.png");
    }
    );
});

$(function ()
{
    $(".starFour").hover(function ()
    {
        $(".starOne").attr("src", "/Content/star-red.png");
        $(".starTwo").attr("src", "/Content/star-red.png");
        $(".starThree").attr("src", "/Content/star-red.png");
        $(".starFour").attr("src", "/Content/star-red.png");
    },
    function ()
    {
        $(".starFour").attr("src", "/Content/star-grey.png");
        $(".starThree").attr("src", "/Content/star-grey.png");
        $(".starTwo").attr("src", "/Content/star-grey.png");
        $(".starOne").attr("src", "/Content/star-grey.png");
    }
    );
});

$(function ()
{
    $(".starFive").hover(function ()
    {
        $(".starOne").attr("src", "/Content/star-red.png");
        $(".starTwo").attr("src", "/Content/star-red.png");
        $(".starThree").attr("src", "/Content/star-red.png");
        $(".starFour").attr("src", "/Content/star-red.png");
        $(".starFive").attr("src", "/Content/star-red.png");
    },
    function ()
    {
        $(".starFive").attr("src", "/Content/star-grey.png");
        $(".starFour").attr("src", "/Content/star-grey.png");
        $(".starThree").attr("src", "/Content/star-grey.png");
        $(".starTwo").attr("src", "/Content/star-grey.png");
        $(".starOne").attr("src", "/Content/star-grey.png");
    }
    );
});

$(function ()
{
    StarOneHandler();
    StarTwoHandler();
    StarThreeHandler();
    StarFourHandler();
    StarFiveHandler();
})


function StarOneHandler()
{
    $(".starOne").on("click", function ()
    {
        $(".starOne").replaceWith('<img class="starOne" src="/Content/star-red.png" />');
        $(".starTwo").replaceWith('<img class="starTwo" src="/Content/star-grey.png" />');
        $(".starThree").replaceWith('<img class="starThree" src="/Content/star-grey.png" />');
        $(".starFour").replaceWith('<img class="starFour" src="/Content/star-grey.png" />');
        $(".starFive").replaceWith('<img class="starFive" src="/Content/star-grey.png" />');
        $(function ()
        {
            StarOneHandler();
            StarTwoHandler();
            StarThreeHandler();
            StarFourHandler();
            StarFiveHandler();
        });
    });
}

function StarTwoHandler()
{
    $(".starTwo").on("click", function ()
    {
        $(".starOne").replaceWith('<img class="starOne" src="/Content/star-red.png" />');
        $(".starTwo").replaceWith('<img class="starTwo" src="/Content/star-red.png" />');
        $(".starThree").replaceWith('<img class="starThree" src="/Content/star-grey.png" />');
        $(".starFour").replaceWith('<img class="starFour" src="/Content/star-grey.png" />');
        $(".starFive").replaceWith('<img class="starFive" src="/Content/star-grey.png" />');
        $(function ()
        {
            StarOneHandler();
            StarTwoHandler();
            StarThreeHandler();
            StarFourHandler();
            StarFiveHandler();
        });
    });
}

function StarThreeHandler()
{
    $(".starThree").on("click", function ()
    {
        $(".starOne").replaceWith('<img class="starOne" src="/Content/star-red.png" />');
        $(".starTwo").replaceWith('<img class="starTwo" src="/Content/star-red.png" />');
        $(".starThree").replaceWith('<img class="starThree" src="/Content/star-red.png" />');
        $(".starFour").replaceWith('<img class="starFour" src="/Content/star-grey.png" />');
        $(".starFive").replaceWith('<img class="starFive" src="/Content/star-grey.png" />');
        $(function ()
        {
            StarOneHandler();
            StarTwoHandler();
            StarThreeHandler();
            StarFourHandler();
            StarFiveHandler();
        });
    });
}

function StarFourHandler()
{
    $(".starFour").on("click", function ()
    {
        $(".starOne").replaceWith('<img class="starOne" src="/Content/star-red.png" />');
        $(".starTwo").replaceWith('<img class="starTwo" src="/Content/star-red.png" />');
        $(".starThree").replaceWith('<img class="starThree" src="/Content/star-red.png" />');
        $(".starFour").replaceWith('<img class="starFour" src="/Content/star-red.png" />');
        $(".starFive").replaceWith('<img class="starFive" src="/Content/star-grey.png" />');
        $(function ()
        {
            StarOneHandler();
            StarTwoHandler();
            StarThreeHandler();
            StarFourHandler();
            StarFiveHandler();
        });
    });
}

function StarFiveHandler()
{
    $(".starFive").on("click", function ()
    {
        $(".starOne").replaceWith('<img class="starOne" src="/Content/star-red.png" />');
        $(".starTwo").replaceWith('<img class="starTwo" src="/Content/star-red.png" />');
        $(".starThree").replaceWith('<img class="starThree" src="/Content/star-red.png" />');
        $(".starFour").replaceWith('<img class="starFour" src="/Content/star-red.png" />');
        $(".starFive").replaceWith('<img class="starFive" src="/Content/star-red.png" />');
        $(function ()
        {
            StarOneHandler();
            StarTwoHandler();
            StarThreeHandler();
            StarFourHandler();
            StarFiveHandler();
        });
    });
}

回答1:

Did you try to set an id to the inputs and the for-attribute to the labels?

<label class="starRadioButton" for="rating4"><input type="radio" id="rating4" name="Rating" value="4" />

     <img title="Very Good" alt="4" class="starFour" src="~/Content/star-grey.png" /></label>

I believe IE is a bit stricter then others browser regarding labels/inputs.

If that not help, try to set an Id to your inputs and expand your click event listener with (as example) $("#rating4").attr("checked", true).

回答2:

First, set an ID on the inputs and the for-attribute on the labels.

<label class="starRadioButton" for="radioOne">

    <input type="radio" id="radioOne" name="Rating" value="4" />

    <img title="Very Good" alt="4" class="starFour" src="~/Content/star-grey.png" />

</label>

Here's the modified event listener that solves this problem:

function StarOneHandler()
{
    $(".starOne").on("click", function ()
    {
        $(".starOne").replaceWith('<img class="starOne" src="/Content/star-red.png" />');
        $(".starTwo").replaceWith('<img class="starTwo" src="/Content/star-grey.png" />');
        $(".starThree").replaceWith('<img class="starThree" src="/Content/star-grey.png" />');
        $(".starFour").replaceWith('<img class="starFour" src="/Content/star-grey.png" />');
        $(".starFive").replaceWith('<img class="starFive" src="/Content/star-grey.png" />');
        $(function ()
        {
            StarOneHandler();
            StarTwoHandler();
            StarThreeHandler();
            StarFourHandler();
            StarFiveHandler();
        });

        //$("#radioOne").attr("checked", true);
        document.getElementById("radioOne").checked = true;
    });
}

Note that I commented out the last line that uses jQuery and replaced it with raw Javascript. If you use the commented-out jQuery line, the rating will get stuck on whichever star you clicked first in IE and Edge, but not Opera, Chrome, Mozilla, Safari, or stock Android. Using the document.getElementById line works fine. I have no idea why this happens.