Label Text doesn't update unless i debug or hover over dropdown menu IE9

Question

i am stumped about this one. The code works perfectly it goes through the loop as expected. It even updates the text. But the text on the screen won't update unless i am debugging and stepping through the code. or if i hover over my dropdown menu.

Anyone have a clue on why below code does update the label on the screen? Mind you this works fine on any other version of IE or any other browser for that matter.

<asp:RadioButtonList id="stuff" CssClass="radiolist" runat="server"> 
    <asp:ListItem Value="1" Text="1" Selected="True" />
    <asp:ListItem Value="2" Text="2" />
</asp:RadioButtonList>

<script type="text/javascript">
$('input[type=radio]').change(function () {
    var checked = $(".radiolist input:checked").val();
    setCheckBoxText(checked);
});

function setCheckBoxText(option) {
    console.log(option);
    var chk = $(".chkAgree input");
    var lbl = $(".chkAgree label");

    if (option == "1") {
        lbl.text("1");
        chk.attr('checked', false);
        $(".btnNext").attr("disabled", "disabled");
    }
    if(option == "2") {
        lbl.text("2");
        chk.attr('checked', false);
        $(".btnNext").attr("disabled", "disabled");
    }
}
</script>

Edit, $(function() {}); happens in the Masterpage.

Answer 1

So it looks like i figured out how to fix it.

instead of lbl.text("Different Text"); use lbl.html("Different Text");

I don't know why this doesn't work in IE9 but it seems to solve my issue.

Answer 2

Missing start quotation? lbl.text(1");