Hi,
this is what I can offer.
The left three checkboxes are exclusive, if you check one the others get unchecked.
The right checkboxes behave as checkboxes usually behave.
On small devices there is no additional header. No idea, how to add.
To get this use an array(text)
This first script inserts the checkboxes and stes the exclusiveness.
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
// Identify this question
var thisQuestion = $('#question{QID}');
// Column-specific classes
$('tr.subquestion-list', thisQuestion).each(function(i) {
$('th, td', this).each(function(i) {
$(this).addClass('column-'+i);
});
});
// Insert checkboxes
$('.answer-item.column-1, .answer-item.column-2, .answer-item.column-3, .answer-item.column-4, .answer-item.column-5, .answer-item.column-6', thisQuestion).addClass('custom-checkbox-item');
$('.custom-checkbox-item', thisQuestion).each(function(i) {
var thisID = $('input:text:eq(0)', this).attr('id');
$('label', this).before('<input class="" id="'+thisID+'" value="Y" type="checkbox" name="'+thisID.replace(/answer/, '')+'" />');
if($('input:text:eq(0)', this).val() == 'Y') {
$('input:checkbox:eq(0)', this).prop('checked', true);
}
$(this).removeClass('text-item').addClass('checkbox-item');
$('input:text:eq(0)', this).remove();
});
// Identify exclusive items
$('.answer-item.column-1, .answer-item.column-2, .answer-item.column-3', thisQuestion).addClass('exclusive-item');
// Listeners for exclusive items
$('.exclusive-item input:checkbox', thisQuestion).on('change', function(e) {
if($(this).is(':checked')) {
var thisItem = $(this).closest('.answer-item');
$(this).closest('tr.subquestion-list').find('.answer-item').not(thisItem).find('input:checkbox').prop('checked', false);
$(this).closest('tr.subquestion-list').find('input:text').val('');
}
});
});
</script>
Now you may insert the additional header
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
// Insert the column categories
$('#question{QID} table.subquestion-list thead tr:eq(0) td:eq(0)').remove();
$('#question{QID} table.subquestion-list thead').prepend('<tr class="ls-heading">\
<td rowspan="2" colspan="1" style="border-top:0 !important;"></td>\
<th class="answer-text inserted-header" colspan="3" style="border-right:4px solid black">Frequency</th>\
<th class="answer-text inserted-header" colspan="3" style="border-right:1px solid #ddd">Location</th>\
</tr>');
});
</script>
You see that I already styled the border of this header.
The border to separate the two parts is in this third script
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
// Identify this question
var thisQuestion = $('#question{QID}');
// Add a question class
thisQuestion.addClass('custom-array');
// Column-specific classes
$('table.subquestion-list tr', thisQuestion).each(function(i) {
$('th, td', this).each(function(i) {
$(this).addClass('column2-'+i);
});
});
});
</script>
And at last a little bit of css to set the color of the separator and its width.
Code:
<style type="text/css">
.column-3 {
border-right:4px solid black !important;
}
table.subquestion-list thead .column2-2 {
border-right: 4px solid black;
}
</style>
This all with my very restricted knowledge of javascript.
I only combined some scripts from the forum.
Joffm
