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

Question

I need to change the color of radio button on click. There are four options which the user can choose from. When a user chooses an option, i would like the other radio buttons to disable and change the color like for wrong answer 'red' color and for right answer 'green' color. I have done it to the point of disabling the radio buttons. The answer is "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

You can check your answers in JavaScript and highlight options accordingly.

By assuming "Prakash Tandon" is right answer, I have written the script, but it needs to be enhanced.

 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>