Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Identify the questions
var thisQuestion = $('#question{QID}');
var nextQuestion = $(thisQuestion).nextAll('.array-multi-flexi:eq(0)');
var nextQuestion2 = $(thisQuestion).nextAll('.array-multi-flexi:eq(1)');
var nextQuestion3 = $(thisQuestion).nextAll('.array-multi-flexi:eq(2)');
var theseQuestions = $(thisQuestion).add(nextQuestion).add(nextQuestion2).add(nextQuestion3);
// Assign row-specific classes
$('table.subquestions-list tbody', theseQuestions).each(function(i){
$('> *', this).each(function(i){
$(this).addClass('row-'+(i+1)+'');
$(this).attr('data-row', (i+1));
});
});
// Assign column-specific classes
$('table.subquestions-list tr', theseQuestions).each(function(i){
$('> *', this).each(function(i){
$(this).addClass('column-'+i+'');
$(this).attr('data-column', i);
});
});
// Initial Q2 input states
$('input[type="text"]', nextQuestion).prop('readonly', false).css('opacity', '1');
$('input[type="text"]', nextQuestion2).prop('readonly', false).css('opacity', '1');
$('input[type="text"]', nextQuestion3).prop('readonly', false).css('opacity', '1');
// Loop through all un-checked boxes in Q1
$('input[type="checkbox"]:not(:checked)', thisQuestion).each(function(i) {
// Disable the corresponding input in Q2
var rowNum = $(this).closest('tr').attr('data-row');
var columnNum = $(this).closest('td').attr('data-column');
$('tr[data-row="'+rowNum+'"] td[data-column="'+columnNum+'"] input[type="text"]', nextQuestion).val('').prop('readonly', true).css('opacity', '0.3');
$('tr[data-row="'+rowNum+'"] td[data-column="'+columnNum+'"] input[type="text"]', nextQuestion2).val('').prop('readonly', true).css('opacity', '0.3');
$('tr[data-row="'+rowNum+'"] td[data-column="'+columnNum+'"] input[type="text"]', nextQuestion3).val('').prop('readonly', true).css('opacity', '0.3');
});
// Listener on the Q1 checkboxes
$('input[type="checkbox"]', thisQuestion).on('change', function(e) {
// Reset Q2, Q3, Q4
$('input[type="text"]', nextQuestion).prop('readonly', false).css('opacity', '1');
$('input[type="text"]', nextQuestion2).prop('readonly', false).css('opacity', '1');
$('input[type="text"]', nextQuestion3).prop('readonly', false).css('opacity', '1');
// Loop through all un-checked boxes in Q1
$('input[type="checkbox"]:not(:checked)', thisQuestion).each(function(i) {
// Disable the corresponding input in Q2
var rowNum = $(this).closest('tr').attr('data-row');
var columnNum = $(this).closest('td').attr('data-column');
$('tr[data-row="'+rowNum+'"] td[data-column="'+columnNum+'"] input[type="text"]', nextQuestion).val('').prop('readonly', true).css('opacity', '0.3');
$('tr[data-row="'+rowNum+'"] td[data-column="'+columnNum+'"] input[type="text"]', nextQuestion2).val('').prop('readonly', true).css('opacity', '0.3');
$('tr[data-row="'+rowNum+'"] td[data-column="'+columnNum+'"] input[type="text"]', nextQuestion3).val('').prop('readonly', true).css('opacity', '0.3');
});
});
});
</script>
Topic Author
