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

Question

我试图在选择一个选项后立即禁用其他选项，但使用 java 脚本我无法做到这一点。请帮我。到目前为止我已经尝试过 <?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

您可以获得name单选按钮的属性，clicked根据这个属性，我们将遍历所有具有该名称的单选按钮和disable未选中的单选按钮。

这是演示代码：

$("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

这是纯 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');

      }

    });

  });

});