选择“单选按钮”中的一个选项时如何禁用其他选项？

Question

I am trying to disable other options immediately once an option is selected but using java-script I could not do this. Please help me. I have tried so far

 <?php 
    $answer = $exm->getAnswer($number);

    if ($answer) {
        while ($result = $answer->fetch_assoc()) {
?>
            <tr>
                <td>
                 <input id="question_radio" type="radio" name="ans" value="<?php echo $result['id']; ?>"/><?php echo $result['ans']; ?>



<script id="question_radio" type="text/javascript">$(":radio").click(function(){
   var radioName = $(this).attr("ans"); //Get radio name
  $(":radio[name='"+radioName+"']:not(:checked)").attr("disabled", true); //Disable all unchecked radios with the same name
});             

            </script>


                </td>
            </tr>
<?php } } ?>
            <tr>
              <td>
                <input type="submit" name="submit" value="Next Question"/>
                <input type="hidden" name="number" value="<?php echo $number; ?>" />

                </td>
            </tr>

Answer 1

You can get the name attribute of the radio which is clicked and depending on this we will loop through all the radio button with that name and disable radio button which are not checked.

Here is demo code:

 $("input[type=radio]").click(function() { //getting name attribute if radio which is clicked var name = $(this).attr("name"); console.log(name) //loop only through those radio where name is same $('input[name="' + name + '"]').each(function() { //if not selected if ($(this).is(":not(:checked)")) { // add disable $(this).attr('disabled', 'disabled'); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="question_radio" type="radio" name="ans" value="<?php echo $result['id']; ?>" /> A <input id="question_radio" type="radio" name="ans" value="<?php echo $result['id']; ?>" />B <input id="question_radio" type="radio" name="ans" value="<?php echo $result['id']; ?>" />C <br> <input id="question_radio" type="radio" name="ans1" value="<?php echo $result['id']; ?>" />A <input id="question_radio" type="radio" name="ans1" value="<?php echo $result['id']; ?>" /> B <input id="question_radio" type="radio" name="ans1" value="<?php echo $result['id']; ?>" />C

Answer 2

Here is the implementation in pure Javascript

document.querySelectorAll("input[type=radio]").forEach(function (el) {
  el.addEventListener('click', function () {
    //getting name attribute if radio which is clicked
    var name = el.getAttribute('name');
    //loop only through those radio where name is same.
    document.querySelectorAll('input[name="' + name + '"]').forEach(function (el) {
      if (el.matches(":not(:checked)")) {
        el.setAttribute('disabled', 'disabled');
      }
    });
  });
});