Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// Identify this question
var qID = {QID};
var thisQuestion = $('#question'+qID);
// Add some classes
$(thisQuestion).addClass('with-exclusive-items');
$('td.answer-item', thisQuestion).addClass('non-exclusive-item');
// Loop through the last-column cells
$('td.answer-item:last-child', thisQuestion).each(function(i) {
varThisID = $('input[type="text"]', this).attr('id');
// Add a class
$(this).removeClass('non-exclusive-item').addClass('exclusive-item');
// Hide the text input
$('td.answer-item:last-child input[type="text"]', thisQuestion).hide();
// Insert checkboxes
$(this).append('<div class="checkbox">\
<input class="checkbox" name="" id="'+varThisID+'_cbox" value="N/A" type="checkbox">\
<label for="'+varThisID+'_cbox" class="answertext inserted-label"></label>\
</div>');
});
// Listener on the checkboxes
$('.exclusive-item input[type="checkbox"]', thisQuestion).on('change', function(e) {
var thisRow = $(this).closest('tr.subquestion-list');
var thisCell = $(this).closest('td.answer-item');
if($(this).is(':checked')) {
$('input[type="text"]', thisCell).val('1');
$('.non-exclusive-item input[type="text"]', thisRow).val('');
}
else {
$('input[type="text"]', thisCell).val('');
}
// Fire Expression Manager
$('input[type="text"]', thisRow).each(function(i) {
$(this).trigger('keyup');
});
});
// Listener on the text inputs
$('.non-exclusive-item input[type="text"]', thisQuestion).on('keyup change', function(e) {
var thisRow = $(this).closest('tr.subquestion-list');
if($.trim($(this).val()) != '') {
$('.exclusive-item input[type="checkbox"]', thisRow).prop('checked',false);
$('.exclusive-item input[type="text"]', thisRow).val('');
}
// Fire Expression Manager
$('.exclusive-item input[type="text"]', thisRow).trigger('keyup');
});
// Insert some styles (these could be in template.css)
// For the LS 2.67 default template
var newStyles = '.with-exclusive-items thead th.answertext {\
text-align: center;\
}\
.with-exclusive-items .exclusive-item {\
text-align: center;\
vertical-align: middle;\
cursor: pointer;\
}\
.with-exclusive-items .checkbox {\
padding-left: 0;\
}\
.with-exclusive-items .inserted-label {\
width: 24px;\
min-height: 24px;\
padding: 0;\
}\
.with-exclusive-items .inserted-label::before {\
margin: 4px 0 0 4px;\
}\
.with-exclusive-items .inserted-label::after {\
margin: 4px 0 0 4px;\
}';
$('head').append('<style type="text/css">'+newStyles+'</style>');
});
</script>
