restricting the selection of checkboxes

Question

how do i get the user to check only one of these checkboxes .. is there any way other than disabling the checkboxes on selection??

<td width="25%"><input type="checkbox" name="choice" value="Good" />Good</td>
<td width="25%"><input type="checkbox" name="choice" value="Average" />Average</td>
<td width="25%"><input type="checkbox" name="choice" value="Sucks" />Sucks</td>
<td width="25%"><input type="checkbox" name="choice" value="Fascinating" />Fascinating</td>

if its a javascript, please make it simple to understand ..

Answer 1

You are looking for a radio button group.

<td width="25%"><input type="radio" name="choice" value="Good" />Good</td>
<td width="25%"><input type="radio" name="choice" value="Average" />Average</td>
<td width="25%"><input type="radio" name="choice" value="Sucks" />Sucks</td>
<td width="25%"><input type="radio" name="choice" value="Fascinating" />Fascinating</td>

Answer 2

If the user can only select one of them at a time, you should use <input type="radio"> instead of checkbox.

If you must use checkbox, try (example):

var choices = document.getElementsByName('choice');

for (var i = choices.length-1; i >= 0; -- i) {
  choices[i].onclick = function () {
    for (var j = choices.length-1; j >= 0; -- j) {
      if (choices[j] != this)
        choices[j].checked = false;
    }
  }
}

Answer 3

Use radio buttons instead for your requirement. When you select, only one of them will get checked.

Here is the working demo of that :)