將 class 更改為 jQuery 的單選按鈕

Question

我有 jQuery 代碼並發出問題，用於檢查哪個單選按鈕被選中，然后將顏色更改為其中一些。此外，我想在按下其中一個按鈕后禁用按鈕。 我的問題是，當我檢查例如“A”時，所有答案都變成紅色，而不是“A”變成綠色，其他所有答案都變成紅色。

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

Answer 1

刪除br以使用帶有display:block;的div ； 解決您的問題。

但是之后如果我select B,C或者D解，只有A是綠色的。 這是因為您需要使用$(this)來獲取當前元素。

我重寫了一些部分以對應於@freedomn-m 建議的 JQuery 語法。

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