Radio Button Selection not refreshing in UI

Question

First time radio selection works but if i am selecting radio second time then its not showing as selected. attribute checked=checked showing in html but its not reflection in UI.

What is the solution for this that it can reflect. Here is script code to apply attribute."

  $('#' + myradioid+ ' input:radio').attr("checked", "checked")

Here is my html

<ul id="Ulist" class="Ulist1">
    <h2 class="QuestionTxt">First question </h2>
    <li id="117184normal" class="statusDefaultAns">
        <a id="117184" href="#" onclick="Select(117184);">
            <h2>
                <input quiz-option="multiple-radio" id="Radio1" type="radio" name="quiz-radio" res="117184">
                <label style="cursor: pointer" for="117184">true</label>

            </h2>
        </a>

    </li>
    <li id="117185normal" class="statusDefaultAns"><a id="117185" href="#" onclick="Select(117185);">
        <h2>
            <input quiz-option="multiple-radio" id="Radio2" type="radio" name="quiz-radio" res="117185">
            <label style="cursor: pointer" for="117185">false</label>

        </h2>
    </a>

    </li>
    <li id="117352normal" class="statusDefaultAns">
        <a id="117352" href="#" onclick="Select(117352);">
            <h2>
                <input quiz-option="multiple-radio" id="Radio3" type="radio" name="quiz-radio" res="117352">
                <label style="cursor: pointer" for="117352">ws</label>

            </h2>
        </a>

    </li>
</ul>

Plz provide a solution for this so that radio selection can refresh in ui.

Thanks Dalvir

Answer 1

Try .prop instead of attr:

$('#' + myradioid+ ' input:radio').prop("checked", true)

Better yet, try it with the onclick method on the label instead of the line. Selecting something that selects itself could be causing an infinite loop, which would explain your problem. Try this code:

window.Select = function(id) {
    $('#' + id + 'normal input[type="radio"]').click();
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Ulist" class="Ulist1">
<h2 class="QuestionTxt">First question </h2>    
<li id="117184normal" class="statusDefaultAns"><a id="117184" href="#"><h2>
    <input quiz-option="multiple-radio" id="Radio1" type="radio" name="quiz-radio" res="117184" />
     <label style="cursor:pointer" for="117184" onclick="Select(117184);">true</label></h2></a></li>
<li id="117185normal" class="statusDefaultAns"><a id="117185" href="#"><h2>
    <input quiz-option="multiple-radio" id="Radio2" type="radio" name="quiz-radio" res="117185" />
     <label style="cursor:pointer" for="117185" onclick="Select(117185);">false</label></h2></a></li>
<li id="117352normal" class="statusDefaultAns"><a id="117352" href="#"><h2>
    <input quiz-option="multiple-radio" id="Radio3" type="radio" name="quiz-radio" res="117352" />
     <label style="cursor:pointer" for="117352" onclick="Select(117352);">ws</label></h2></a></li>
</ul>