Single selection on grid columns

Compatibility: IdSurvey 6 IdSurvey 7

This javascript can be used in simple matrix questions to force a single selection on grid columns, so that the value of the columns can be selected only once in the grid.

Notes

  • This script will only work with single select matrixes.
  • The number of columns and rows of the grid must be the same.
  • You can make the question optional (for example, you have 9 items but you want the respondent to mark a preference for the top 3). In order to do so, you simply have to set the question as “optional” from the gearwheel button of the question itself.

Instructions

Copy the following script in the “Client script” box you find in the gearwheel button of the page.

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

Leave A Comment?