Disable certain choices in a multiple select grid based on answers from another multiple select grid.

Question

Hello!

I am trying to create a multiple select grid based on answer choices from another multiple select grid.

The first grid has 7 columns with brand names and 8 rows of attributes. In this grid they are selecting which brands are among the best at each attribute.

The next grid would have the same structure but respondents would select which brands are among the worst for each attribute. Since it is a large grid I wouldn't want to allow respondents to select  the same brand as among the best and among the worst.  Does anyone know of a way to disable check boxes in this second grid if the respondent chose that column and row in the previous grid?

Thanks!!

Answer 1

Start by importing this question to your question library, then adding it to the same page as your second grid question:

http://sawtoothsoftware.com/community-question-library/1739-disable-graphical-inputs

Now add this code to your second grid question:

<script>
$(document).ready(function(){
    [% Begin Unverified Perl        
        my $firstGridQ = 'GridQ1';
        my $output = '';
        for (my $r = 1; $r <= 8; $r++) {
            for (my $c = 1; $c <= 7; $c++) {
                if (GETVALUE($firstGridQ . '_r' . $r . '_c' . $c) == 1) {
                    $output .= 'SSI_DisableGraphicalInput("' . QUESTIONNAME() . '_r' . $r .'_c' . $c . '");';
                }
            }
        }
        return $output;
    End Unverified %]
})
</script>

Replace "GridQ1" with the name of the first grid question.

Comments

Thanks Zachary! Do you know what the coding would be like if we don't have Lighthouse Studio yet?

---

"Disable Graphical Inputs" is simply a text question with this content:

<style>
.clickable,
.clickable > td {
    position: relative;
}

.disabledGraphicalOverlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    cursor: default;
}
</style>

<script>
function SSI_DisableGraphicalInput(id) {
    var clickable = $('#' + id).closest('.clickable');
    if (!$(clickable).is('tr')) {
        $(clickable).append('<div class="disabledGraphicalOverlay"/>');
    }
    else {
        $(clickable).children('td').append('<div class="disabledGraphicalOverlay"/>');
    }
    $('.disabledGraphicalOverlay').click(function(event){
        event.stopPropagation();
    });
    $(clickable).find('.text_input, textarea').prop('disabled', true);
    $(clickable).css('opacity', 0.5);
}

function SSI_EnableGraphicalInput(id) {
    var clickable = $('#' + id).closest('.clickable');
    $(clickable).find('.disabledGraphicalOverlay').remove();
    $(clickable).find('.text_input, textarea').prop('disabled', false);
    $(clickable).css('opacity', 1);
}
</script>