Radio button selection does not update in UI

The radio works the first time, but if I select the radio a second time, it does not show up as selected. checked = checked attribute rendered in html, but not reflected in UI.

What solution for this it can reflect. Here is the script code to apply the 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 the radio selection can be updated in the ui.

Thanks Dalvir

+3


source to share


1 answer


Try .prop instead of attr:

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

      

Better yet, try using the onclick method on the label instead of the string. Choosing what he chooses can cause an endless loop that will 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>
      

Run codeHide result


+2


source







All Articles