This should work for check-boxes. It also modifies the listeners to un-check the box if a dropdown is cleared.
Code:
<script type="text/javascript" data-author="Tony Partner">
$(document).on('ready pjax:scriptcomplete',function(){
// The text for the "Please choose" option
var chooseText = {
'en': 'Please choose...',
'de': 'Bitte auswählen...',
'fr': ' Veuillez choisir ...'
}
// Identify the questions
var qID = '{QID}';
var thisQuestion = $('#question'+qID);
var nextQuestion = $(thisQuestion).nextAll('.list-dropdown:eq(0)');
var nextQuestion2 = $(thisQuestion).nextAll('.list-dropdown:eq(1)');
var lang = $('html').attr('lang');
// Hide the next questions
nextQuestion.hide();
nextQuestion2.hide();
// Move the dropdowns
$('.answer-item.checkbox-item:eq(0)', thisQuestion).addClass('with-dropdown').append($('.answer-item', nextQuestion));
$('.answer-item.checkbox-item:eq(1)', thisQuestion).addClass('with-dropdown').append($('.answer-item', nextQuestion2));
// Cleanup styles
$('.answer-item.checkbox-item .answer-item', thisQuestion).css({
'display': 'inline-block',
'margin-left': '1em',
'padding': '0'
});
// Initial states
var iChooseText = chooseText['en'];
if(lang in chooseText) {
iChooseText = chooseText[lang];
}
$.each($('select.form-control', thisQuestion), function(i) {
if($('option[value=""]', this).length == 0) {
$(this).prepend('<option value="">'+iChooseText+'</option>');
}
});
// Listener on the checkboxes
$('.answer-item.checkbox-item :checkbox', thisQuestion).on('change', function(e) {
$.each($('.answer-item.with-dropdown', thisQuestion), function(i) {
if($(':checkbox:checked', this).length == 0) {
$('.answer-item input[type="hidden"]', this).val('');
$('.answer-item select', this).val('').trigger('change');
}
});
});
// Listener on the dropdowns
$('.answer-item.with-dropdown select', thisQuestion).on('change', function(e) {
var thisItem = $(this).closest('.checkbox-item');
if($(this).val() != '') {
$('input[type="hidden"]:first', thisItem).val('Y');
$(':checkbox', thisItem).prop('checked', true).trigger('change');
}
else {
$('input[type="hidden"]:first', thisItem).val('');
$(':checkbox', thisItem).prop('checked', false).trigger('change');
}
});
});
</script>