Single selection on grid columns

Compatibility:IdSurvey 5IdSurvey 6

This javascript can be used in simple grids to enforce a single selection on grid columns (the value of the columns can be selected only once in the grid). This script works only with single select grids.

Instructions

Attention: number of columns and rows has to be the same!

Paste the script in the Client script box you find in the gearwheel button of the page.

IDSURVEY 5 VERSION:

<script>
      
      $(":radio").on("change",function(){    	
          
          var num = $(this).closest("tr").find(":radio").index($(this));
          $(".grid-question-table tr").each(function(){
              console.log($(this).find("radio:eq("+num+")").is(":checked"));
              if($(this).find(":radio:eq("+num+")").is(":checked")){
                  $(this).find(":radio:eq("+num+")").prop("checked",false);
                }
            });
          $(this).prop("checked",true);
        });
      
      $(":text").on("keyup focusout",function(){
          $(":text").prop("disabled",false);
        });
      
      
  </script>

 

IDSURVEY 6 VERSION:

<script>

  $(function(){
    var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && $(window).width() <= 800; var isMobileBrowser = (typeof _customCheckMobileBrowser == "function") ? _customCheckMobileBrowser() : isMobile; if(isMobileBrowser){ $(".survey-page-wrapper #page .group-question-sub-elements > .sub-elements-wrapper :radio").on("change", function(){
        var main = $(this).closest(".main-responses");        
        var li = $(this).closest("li");
        var index = main.find("li").index(li);
        var currentRadio = $(this).closest(".sub-elements-wrapper");

        $(".survey-page-wrapper .group-question-sub-elements > .sub-elements-wrapper .sub-elements-wrapper").each(function(){
          if(!$(this).is(currentRadio)){
            if($(this).find(".main-responses").find("li").eq(index).find(":radio").prop("checked") == true)
              $(this).find(".main-responses").find("li").eq(index).find(":radio").prop("checked", false);
          }
        });

      });
    }else{
      $(".grid-question-table :radio").on("change", function(){
        var table = $(this).closest("table");
        var tr = $(this).closest("tr");
        var index = tr.find(":radio").index($(this));
        table.find("tr").not(tr).each(function(){
          if($(this).find(":radio").eq(index).prop("checked") == true)
            $(this).find(":radio").prop("checked", false);
        });
      });
    }
  });
</script>

If you want to make the question optional (for example, you have 9 items but you want the respondent to mark a preference for the top 3), the procedure changes between version 5 and 6. In 6, you can simply set the question as “optional” from the gearwheel button. In version 5, instead, you can use this second script:

<style>
.grid-question-table tbody tr td:last-child,
.grid-question-table tfoot th:last-child,
.grid-question-table thead th:last-child{
display:none;
}
</style>
<script>
$(".grid-question-table tr").each(function(){
$(this).find("td:last").find(":radio").prop("checked",true);
});
$(":radio").on("change",function(){
var num = $(this).closest("tr").find(":radio").index($(this));
console.log(num);
$(".grid-question-table tr").each(function(){
console.log($(this).find("radio:eq("+num+")").is(":checked"));
if($(this).find(":radio:eq("+num+")").is(":checked")){
$(this).find(":radio:eq("+num+")").prop("checked",false);
$(this).find(":radio:last").prop("checked",true);
}
});
$(this).prop("checked",true);
});
$(":text").on("keyup focusout",function(){
$(":text").prop("disabled",false);
});
</script>

 

java_single_column

Leave A Comment?