[Solved] How to disable radio button After 1 Click

by


First thing, I’d clean up the HTML code a bit… I assume the four radio buttons are all possible answers to one question, in which case they should all have the same name (not value) so that you can only choose one answer; then in the script I’d would need to use more information than just the value of the checked answer, so instead of sending this.value to the function, I’d just send this:

<input type="radio" name="question_1" value="option_1" onclick="checkValue(this);" /> Hyper Text Markup Languages <br /> <br />
<input type="radio" name="question_1" value="option_2" onclick="checkValue(this);" /> Highest Text Markup Language <br /> <br />
<input type="radio" name="question_1" value="option_3" onclick="checkValue(this);" /> Hyper Total Markup Language <br /> <br />
<input type="radio" name="question_1" value="option_4" onclick="checkValue(this);" /> Hyper Text Markup Language <br /> <br />

In the script, to disable the radio buttons after they’ve been clicked, I would add a function that goes through each radio button that has the same name (as mentioned above) as the one that’s been clicked, and disable it:

var radiobuttons = document.getElementsByName(option.name);
for(i = 0; i < radiobuttons.length; i++) {
    radiobuttons[i].disabled = true;
}

Then, of course, the alert to let the visitor know whether they’ve got the right answer:

if (option.value == "option_4") {
    alert("Correct");
} else {
    alert("False, Option (4) is the Correct Answer.");
}

Here’s a fiddle: http://jsfiddle.net/Niffler/nyqk6gga/

(I’m assuming you don’t want to use jQuery; otherwise there would be much nicer-looking ways to do this…)

0

solved How to disable radio button After 1 Click