Unique values from group of radio buttons

[aals]

I am working on survey application in this I want only unique answers to be selected like for eg

     <form action="somefile.php" method="post" name="testForm">
     <tr><td>Question 1 </td><td>
        4<input type="radio" name="1" value='4' class="Session"/>
        3<input type="radio" name="2" value='3' class="Session"/>
        2<input type="radio" name="3" value='2' class="Session"/>
        1<input type="radio" name="4" value='1' class="Session"/></td></tr>
        <tr><td>Question 2 </td><td>
        4<input type="radio" name="1" value='4' class="Session"/>
        3<input type="radio" name="2" value='3' class="Session"/>
        2<input type="radio" name="3" value='2' class="Session"/>
        1<input type="radio" name="4" value='1' class="Session"/></td></tr>
        <tr><td>Question 3 </td><td>
        4<input type="radio" name="1" value='4' class="Session"/>
        3<input type="radio" name="2" value='3' class="Session"/>
        2<input type="radio" name="3" value='2' class="Session"/>
        1<input type="radio" name="4" value='1' class="Session"/></td></tr>
        <tr><td>Question 4 </td><td>
        4<input type="radio" name="1" value='4' class="Session"/>
        3<input type="radio" name="2" value='3' class="Session"/>
        2<input type="radio" name="3" value='2' class="Session"/>
        1<input type="radio" name="4" value='1' class="Session"/></td></tr>
       <tr><td><input type="submit" value="submit" onClick="return check()"/></td></tr>
       <div id="unAnswered"></div>

on submit I want to check for 2 things
- all the questions are to be answered
- the values selected for each should be unique like for question 1 if user has select 4 then for question 2, 3 & 4 the 4th option should be disabled.

I worked out something like this in javascript :

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
 $('input:radio').click(function() {
       //reset all the radios
       $('input:radio').removeAttr('disabled');
       if($(this).is(':checked')) {
           var val = $(this).val();
           //disable all the ones with the same value
           $('input:radio').each(function() {
               if(val == $(this).val()) {
                   $(this).attr('disabled',true);
               }
           });
           //let's not disable the one we have just clicked on
           $(this).removeAttr('disabled');
       }
    }); 
       });
function check() {
       for(var i=1;i<5;i++){
                    var answer=false;
                    var q=i;//appending number
                    var x=document.getElementsByName(q);//getting those radio groups
                    var len=x.length;
                    for(var p=0;p<len;p++){
                        if(x[p].checked){
                            answer=true; 
                        }
                    }
                    if(!answer){
                        document.getElementById("unAnswered").innerHTML
                            ="<span style=\"color:red\">You must answer all questions</span>";
                        return false;//exit if one is not answered
                    }
                }

             document.forms["testForm"].submit();//by here all questions are answered
}

</script>

This works fine when checking if all are answered or not but the problem is :
it disables that value for all other questions but once another option is selected, it resets all radios & the user is able to select same value for another question.
I tried commenting this line too

$('input:radio').removeAttr('disabled');

but then the user has only one shot to select the values which I do not want.

What is wrong in my code? Please help.

Thanks in advance.

[Taywin]

Err... You mixed jquery with pure JS... It is quite confusing to have to think back and forth; besides, it is not neat. Anyway, you should think about how it works first.

When a radio button is clicked
Check what value is being changed to (clicked or unclicked)
If clicked, disable all others with the same name/value
else remove disable property from all others with the same name/value

Your JQuery is not correct because you just check if it is clicked but no else. In other words, a user will have only 1 shot to select it... Add else {} where it removes the disable from all of the same name/value. Also, remove the line you said you commented it out because it will cause all disable radio buttons to be clickable again.

[aals]

i am actually new to javascript so that is why I have messed it all up. Well il try & see how it works out. thanks :)

[aals]

I used php instead of javascript to validate the radio buttons.

[Taywin]

If the cost of connecting to the server is not that expensive, it is fine. ;) Regardless the checking occur at the front-end (HTML with JavaScript), please remember that you will have to make sure that the back-end (server) always validates the value. The reason is that a user could manipulate HTTP request or use a toll to by pass the JavaScript validation.