单选按钮使用jQuery更改类

Question

我有并发布了jQuery代码，用于检查选中了哪一个单选按钮，然后更改其中一些按钮的颜色。此外，我还想在其中一个按钮被按下后禁用这些按钮。我的问题是，当我检查例如'a'时，所有的答案都变成红色，而不是'a'变成绿色，所有其他的都变成红色。

null

  $(function() {
    $('.AncientQ11 [type="radio"]').on('change', function() {

      $(document.getElementById("AncientQ1Ans1"))
        .prev().addClass('green')
        .siblings().addClass('red');

      document.getElementById("AncientQ1Ans1").disabled = true;
      document.getElementById("AncientQ1Ans2").disabled = true;
      document.getElementById("AncientQ1Ans3").disabled = true;
      document.getElementById("AncientQ1Ans4").disabled = true;
    });
  });

.red {color: red;}
.black {color: black;}
.green{color:green;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="AncientQ11">
  <label for="AncientQ1Ans1">A</label><br>
  <input type="radio" id="AncientQ1Ans1" name="AncientQ1">

  <label for="AncientQ1Ans2">B</label><br>
  <!--Solution-->
  <input type="radio" id="AncientQ1Ans2" name="AncientQ1">

  <label for="AncientQ1Ans3">C</label><br>
  <input type="radio" name="AncientQ1" id="AncientQ1Ans3">


  <label for="AncientQ1Ans4">D</label>
  <input type="radio" name="AncientQ1" id="AncientQ1Ans4">
</div>

null

Answer 1

删除br以将div与显示：块一起使用；可以解决您的问题。

但在此之后，如果我选择B、C或D解，只有A是绿色的。这是因为您需要使用$(this)来获取当前元素。

并且我重写了一些部分以与JQuery语法相对应，就像@freedomn-m建议的那样。

null

  $(function() {
    $('.AncientQ11 [type="radio"]').on('change', function() {

      $(this).prev().addClass('green').siblings().addClass('red');

      $("#AncientQ1Ans1").attr("disabled", "disabled");
      $("#AncientQ1Ans2").attr("disabled", "disabled");
      $("#AncientQ1Ans3").attr("disabled", "disabled");
      $("#AncientQ1Ans4").attr("disabled", "disabled");
    });
  });

.red {color: red;}
.black {color: black;}
.green{color:green;}

.AncientQ11 > div{
  display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="AncientQ11">
<div>
  <label for="AncientQ1Ans1">A</label>
  <input type="radio" id="AncientQ1Ans1" name="AncientQ1">
  </div>
  <div>
  <label for="AncientQ1Ans2">B</label>
  <input type="radio" id="AncientQ1Ans2" name="AncientQ1">
</div>
<div>
  <label for="AncientQ1Ans3">C</label>
  <input type="radio" name="AncientQ1" id="AncientQ1Ans3">

</div>
<div>
  <label for="AncientQ1Ans4">D</label>
  <input type="radio" name="AncientQ1" id="AncientQ1Ans4">
  </div>
</div>