Start by setting your grid question to not require a response.
Next you'll want to add a checkbox-type select question that comes immediately after the grid question. The select question needs exactly one list item.
Put this code in the select question's footer:
<style>
#[% QuestionName() %]_div {
display: none;
}
</style>
<script>
GLOBAL_SAWTOOTH_[% QuestionName() %] = {
gridOrientation: 'c',
constantSumOrRanking: []
};
$(window).load(function(){
// Question, list
var question = $('#[% QuestionName() %]_div').prevAll('.question')[0].id.replace(/_div/, '');
var qdiv = $('#' + question + '_div');
var list = $('input[name=hid_list_[% QuestionName() %]]').val().split(',').map(Number);
// Move N/A fields
var notApplicableLabel = 'N/A';
$('#[% QuestionName() %]_div .response_row').css('text-align', 'center');
$('#[% QuestionName() %]_div .input_cell').css('display', 'inline-block');
$('#[% QuestionName() %]_div .option_cell').css('display', 'inline-block');
if ([% ScreenWidth() %] > 800) {
$('#[% QuestionName() %]_div .mobile_select').removeClass('mobile_select');
}
if ($(qdiv).hasClass('semanticdiff')) {
$('#[% QuestionName() %]_div .option_cell').remove();
$('#' + question + '_div .column_header_row').append('<td>' + notApplicableLabel + '</td>');
list.forEach(function(item){
$('#' + question + '_' + item + '_row').append('<td></td>');
$('#' + question + '_' + item + '_row > td:last')
.append($('#[% QuestionName() %]_' + item).closest('.response_row'));
});
}
else if ($(qdiv).hasClass('grid') && !$(qdiv).find('.mobile_grid').length) {
$('#[% QuestionName() %]_div .option_cell').remove();
if (GLOBAL_SAWTOOTH_[% QuestionName() %].gridOrientation == 'r') {
$('#' + question + '_div .column_header_row').append('<td>' + notApplicableLabel + '</td>');
$('#' + question + '_div .inner_table > tbody > tr:first-child > td:last-child').css('text-align', 'center');
list.forEach(function(item){
$('#' + question + '_r' + item + '_row').append('<td></td>');
$('#' + question + '_r' + item + '_row > td:last-child')
.append($('#[% QuestionName() %]_' + item).closest('.response_row'));
});
}
else {
$('#' + question + '_div .inner_table > tbody').append('<tr><td>' + notApplicableLabel +'</td></tr>');
$('#' + question + '_div .inner_table > tbody > tr:last-child > td').css('text-align', 'right');
list.forEach(function(item){
$('#' + question + '_div .inner_table > tbody > tr:last-child').append('<td></td');
$('#' + question + '_div .inner_table > tbody > tr:last-child > td:last-child')
.append($('#[% QuestionName() %]_' + item).closest('.response_row'));
});
}
continueGridAltColors(question);
}
else if ($(qdiv).hasClass('grid')) {
$('#[% QuestionName() %]_div .option_cell label').text(notApplicableLabel);
list.forEach(function(item){
$('#' + question + '_div .mobile_grid_card[data-card_num=' + item + ']')
.append($('#[% QuestionName() %]_' + item).closest('.response_row'));
});
}
// N/A click event
$('#' + question + '_div .clickable').click(function(event){
var name = $(this).find('input[type=checkbox]:visible').attr('name');
var bln = SSI_GetValue(name);
if (name !== undefined) {
updateNotApplicableVariable(question, '[% QuestionName() %]', name, bln);
}
});
$(document).on('customGraphicalCheckbox', function(event, graphicalObj, inputObj, bln){
updateNotApplicableVariable(question, '[% QuestionName() %]', inputObj.name, bln);
});
list.forEach(function(item){
updateNotApplicableVariable(question, '[% QuestionName() %]', '[% QuestionName() %]_' + item, SSI_GetValue('[% QuestionName() %]_' + item));
});
})
function updateNotApplicableVariable(baseQuestion, naQuestion, name, bln) {
var qdiv = $('#' + baseQuestion + '_div');
if (name.startsWith(naQuestion + '_')) {
var match = name.match(new RegExp(naQuestion + '_([0-9]+)'));
var item = Number(match[1]);
// Col-oriented grid
if ($(qdiv).hasClass('grid')) {
var rows = $('input[name=hid_row_list_' + baseQuestion + ']').val().split(',').map(Number);
// Disable and clear
if (bln) {
$('#' + baseQuestion + '_r_total_c1').val(0);
rows.forEach(function(row){
if ($('#' + baseQuestion + '_c' + item + '_' + row + '[type=radio]').length) {
$('input[type=radio][name=' + baseQuestion + '_c' + item + ']:visible').prop('checked', false).prop('disabled', true);
SSI_RadioReset(baseQuestion + '_c' + item);
SSI_DisableGraphicalInput(baseQuestion + '_c' + item + '_' + row);
}
else if ($('#' + baseQuestion + '_r' + row + '_c' + item + '[type=checkbox]').length) {
$('input[type=checkbox][name^=' + baseQuestion + '_r][name$=_c' + item + ']:visible').prop('checked', false).prop('disabled', true);
SSI_SetSelect(baseQuestion + '_r' + row + '_c' + item, false);
SSI_DisableGraphicalInput(baseQuestion + '_r' + row + '_c' + item);
}
else {
$('#' + baseQuestion + '_r' + row + '_c' + item).val('').prop('disabled', true);
}
});
}
// Enable
else {
rows.forEach(function(row){
if ($('#' + baseQuestion + '_c' + item + '_' + row + '[type=radio]').length) {
$('input[type=radio][name=' + baseQuestion + '_c' + item + ']:visible').prop('disabled', false);
SSI_EnableGraphicalInput(baseQuestion + '_c' + item + '_' + row);
}
else if ($('#' + baseQuestion + '_r' + row + '_c' + item + '[type=checkbox]').length) {
$('input[type=checkbox][name^=' + baseQuestion + '_r][name$=_c' + item + ']:visible').prop('disabled', false);
SSI_EnableGraphicalInput(baseQuestion + '_r' + row + '_c' + item);
}
else {
$('#' + baseQuestion + '_r' + row + '_c' + item).prop('disabled', false);
}
});
}
}
}
}
function SSI_CustomGraphicalCheckbox(graphicalObj, inputObj, bln) {
$(document).trigger('customGraphicalCheckbox', [graphicalObj, inputObj, bln]);
}
function continueGridAltColors(question) {
var tbody = $('#' + question + '_div .inner_table > tbody');
var firstTdAltColor1 = $(tbody).find('> tr:first-child > td:nth-child(1)').hasClass('alt_color1');
var secondTdAltColor1 = $(tbody).find('> tr:first-child > td:nth-child(2)').hasClass('alt_color1');
$(tbody).find('> tr > td').removeClass('alt_color1 alt_color2');
var trs = $(tbody).find('> tr').length;
var tds = $(tbody).find('> tr:first-child > td').length;
// Alternates by row
if ((firstTdAltColor1 && secondTdAltColor1) || (!firstTdAltColor1 && !secondTdAltColor1)) {
var altColor = firstTdAltColor1 ? 'alt_color1' : 'alt_color2';
for (var r = 1; r <= trs; r++) {
for (var c = 1; c <= tds; c++) {
$(tbody).find('> tr:nth-child(' + r + ') > td:nth-child(' + c + ')').addClass(altColor);
}
altColor = (altColor == 'alt_color1') ? 'alt_color2' : 'alt_color1';
}
}
// Alternates by column
else {
var altColor = firstTdAltColor1 ? 'alt_color1' : 'alt_color2';
for (var c = 1; c <= tds; c++) {
for (var r = 1; r <= trs; r++) {
$(tbody).find('> tr:nth-child(' + r + ') > td:nth-child(' + c + ')').addClass(altColor);
}
altColor = (altColor == 'alt_color1') ? 'alt_color2' : 'alt_color1';
}
}
}
</script>
(cont.)