This should do the trick with drop-downs. It will hide the drop-downs in the last column and insert check-boxes. Checking a box will set all other cells in that row to null and record 99999 for the last cell.
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Identify this question
var thisQuestion = $('#question{QID}');
// The value recorded in data if last-column checkbox is checked
var noAnswer = 99999;
// Add some classes to the answer cells
$('td.question-item', thisQuestion).addClass('normal-opt');
$('td.question-item:last-child', thisQuestion).removeClass('normal-opt').addClass('exlusive-opt')
// Insert the checkboxes
$('.exlusive-opt select', thisQuestion).hide();
$('.exlusive-opt', thisQuestion).append('<input type="checkbox" class="checkbox">');
// Insert a new option in the last column selects
$('.exlusive-opt select', thisQuestion).append('<option value="'+noAnswer+'">'+noAnswer+'</option>');
// A listener on selects
$('.normal-opt select', thisQuestion).on('change', function() {
var thisRow = $(this).closest('tr.subquestions-list');
if($(this).val() != ''){
$('.exlusive-opt input[type=checkbox]', thisRow).prop('checked', false);
$('.exlusive-opt select', thisRow).val('');
$('.exlusive-opt input[type="hidden"]', thisRow).attr('value', '');
}
});
// A listener on the checkboxes
$('.exlusive-opt input[type="checkbox"]', thisQuestion).on('change', function(event) {
var thisCell = $(this).closest('td.question-item');
var thisRow = $(this).closest('tr.subquestions-list');
if($(this).is(':checked')) {
$('select', thisCell).val(noAnswer);
$('input[type="hidden"]', thisCell).attr('value', noAnswer);
$('.normal-opt select', thisRow).val('');
$('.normal-opt input[type="hidden"]', thisRow).attr('value', '');
}
else {
$('.exlusive-opt select', thisRow).val('');
$('.exlusive-opt input[type="hidden"]', thisRow).attr('value', '');
}
});
// Initial states
$('.exlusive-opt input[type="hidden"]', thisQuestion).each(function(i) {
var thisCell = $(this).closest('td.question-item');
if($(this).attr('value') == noAnswer) {
$('input[type=checkbox]', thisCell).prop('checked', true);
$('select', thisCell).val(noAnswer);
}
});
});
</script>
Topic Author
