Radio Button Grid: Allow One Answer Per Column

While we have a Ranking Grid question that automatically validates for a single answer per column there are some scenarios where you might wish to apply this type of validation to a Radio Button Grid question.

For example, in a Ranking Grid question the column headers are automatically created based on the number of rows (items to be ranked). So, if you have seven rows, the column headers will be automatically created as 1-7. Unfortunately, there is not a way to customize this in a Ranking Grid question.

Check it out in an example survey!

OR

Add a survey with this setup to your account!

This workaround uses the following features:

• Radio Button Grid Question Type
• JavaScript Action

Setup

Start by building out your Radio Button Grid question. Once you've added your question title, row and column headers head over to the Layout tab and scroll to the CSS Class Name field and enter the following class name: onePerColumn.

Next, add a JavaScript action to the same page and paste the below JavaScript and click Save Action.

//Relies on a CSS class name onePerColumn being applied to the table.

$(document).ready(function(){
  $(".onePerColumn :radio").change(function(){
    var col = $(this).attr("value");
    
    $(".onePerColumn :radio[value='" + col + "']:checked").not(this).each(function(){
      $(this).prop('checked',false);
    });
    
  });
});

Now, record a few test responses and make sure your validation works as it should!