Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// The error messages
var error1 = 'You can only select 5 attributes.';
var error2 = 'Please select 5 attributes.';
// Identify some elements
var thisQuestion = $('#question{QID}');
var nextMultiOpt = $(thisQuestion).nextAll('.multiple-opt:eq(0)');
var thisTable = $('table.subquestion-list', thisQuestion);
var answerCols = $('col:not(.col-answers)', thisTable);
// Find intitial answer column widths
var colWidth = ($(answerCols[0]).width()/$(thisTable).width())*100;
var colWidthTotal = answerCols.length*colWidth;
// Add a class to the array question (for styling)
$(thisQuestion).addClass('array-plus-checkboxes');
// Hide the next question
$(nextMultiOpt).hide();
// Add an extra column to the array
$('colgroup', thisTable).append('<col class="inserted-col" />');
$('thead tr', thisTable).append('<th class="newColumn1" />');
$('tr.answers-list', thisTable).append('<td class="newColumn1" />');
// Move the hidden question text to the inserted column
$('thead tr th.newColumn1', thisTable).text($('.questiontext', nextMultiOpt).text());
// Move the checkboxes into the array
$('input.checkbox', nextMultiOpt).each(function(i){
$('tbody tr:eq('+i+') td.newColumn1', thisTable).append(this);
});
// Reset the answer column widths
$('col:not(.col-answers)', thisTable).css({
'width': (colWidthTotal/$('col:not(.col-answers)', thisTable).length)+'%'
});
// Remove responsive classes
$(thisTable).closest('.no-more-tables').removeClass('no-more-tables no-more-tables-array-no-dropdown');
$('td.answer-item .visible-xs-block', thisTable).remove();
// Listener on the checkboxes (to test for maximum 5 checked boxes)
$('input.checkbox', thisTable).click(function(event) {
if($('input.checkbox:checked', thisTable).length > 5) {
alert(error1);
$(this).attr('checked', false);
}
if($('input.checkbox:checked', thisTable).length == 5) {
$('th.newColumn1', thisTable).removeClass('mandatory-error');
}
});
// Interrupt the Next/Submit function (to test for minimum 5 checked boxes)
$('#movenextbtn, #movesubmitbtn').bind('click', function () {
$('th.newColumn1', thisTable).removeClass('mandatory-error');
if($('input.checkbox:checked', thisTable).length < 5) {
$('th.newColumn1', thisTable).addClass('mandatory-error');
alert(error2);
return false;
}
});
});
</script>