使用 javascript 或 css 单击时禁用单选按钮并更改颜色

Question

我需要在单击时更改单选按钮的颜色。 有四个选项可供用户选择。 当用户选择一个选项时，我希望其他单选按钮禁用并更改颜色，例如错误答案“红色”颜色和正确答案“绿色”颜色。 我已经做到了禁用单选按钮。 答案是“Prakash Tandon”

 function myFunction() { document.getElementById("ritema").disabled = true; document.getElementById("ritemb").disabled = true; document.getElementById("ritemc").disabled = true; document.getElementById("ritemd").disabled = true; }

 1. Author of the book 'Punjabi Century' <br/> <input id="ritema" name="ritem" type="radio" value="ropt1" onclick="myFunction()" /> <label for="ritema">Goivind Nihalani</label><br> <input id="ritemb" name="ritem" type="radio" value="ropt2" onclick="myFunction()" /> <label for="ritemb">Narayan Bharathi</label> <div class="radio-item-false"> <input onclick="myFunction()" id="ritemc" name="ritem" type="radio" value="ropt3" /> <label for="ritemc">Urvashi Bhatalia</label> </div> <div class="radio-item-true"> <input onclick="myFunction()" id="ritemd" name="ritem" type="radio" value="ropt4" /> <label for="ritemd">Prakash Tandon</label> </div>

Answer 1

您可以在 JavaScript 中检查您的答案并相应地突出显示选项。

通过假设“Prakash Tandon”是正确的答案，我已经编写了脚本，但它需要增强。

 function myFunction(obj) { document.getElementById("ritema").disabled = true; document.getElementById("ritemb").disabled = true; document.getElementById("ritemc").disabled = true; document.getElementById("ritemd").disabled = true; if (obj.labels[0].innerText == "Prakash Tandon") { obj.labels[0].style.background = "green"; } else { obj.labels[0].style.background = "red"; } }

 <input id="ritema" name="ritem" type="radio" value="ropt1" onclick="myFunction(this)" /> <label for="ritema">Goivind Nihalani</label><br> <input id="ritemb" name="ritem" type="radio" value="ropt2" onclick="myFunction(this)" /> <label for="ritemb">Narayan Bharathi</label> <div class="radio-item-false"> <input onclick="myFunction(this)" id="ritemc" name="ritem" type="radio" value="ropt3" /> <label for="ritemc">Urvashi Bhatalia</label> </div> <div class="radio-item-true"> <input onclick="myFunction(this)" id="ritemd" name="ritem" type="radio" value="ropt4" /> <label for="ritemd">Prakash Tandon</label> </div>