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.

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.

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 :)

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

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.

commented: thanks +0