The way that I would handle that would be to...
1) Keep the mandatory setting on the question.
2) Add an "N/A" answer to the y-scale.
3) Add the following new script that will:
- Insert the "Other" input as previously
- Hide the "N/A" column
- Click the hidden "N/A" radio by default
- If text is entered in "Other", the hidden "N/A" is unchecked
- If all text is removed fromn "Other", the hidden "N/A" is checked
Now the hidden "N/A" can satisfy the mandatory requirement if nothing is entered in "Other".
Note that this script will not work on the same page as previous scripts from this thread without modification to those previous scripts.
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Identify the questions
var thisQuestion = $('#question'+{QID}+'');
var nextQuestion = $(thisQuestion).nextAll('.text-short:eq(0)');
// Hide the short-text question
$(nextQuestion).hide();
// Add a class to the "N/A" column
$('table.subquestions-list thead tr th:last', thisQuestion).addClass('na-column');
$('table.subquestions-list tbody tr', thisQuestion).each(function(i) {
$('td:last', this).addClass('na-column');
});
// Hide the "N/A" column
$('.na-column', thisQuestion).hide();
var ansColWidth = Number($('.col-answers', thisQuestion).attr('width').replace(/%/, ''));
var newColWidth = (100-ansColWidth)/($('col.odd, col.even', thisQuestion).length-1);
$('col.odd, col.even', thisQuestion).attr('width', newColWidth+'%');
// Move the hidden text input into the array
$('th.answertext:last', thisQuestion).append($('input[type="text"]', nextQuestion)).closest('tr').addClass('otherRow');
// Initial "N/A" radio setting
if($('.otherRow input:radio:checked', thisQuestion).length == 0) {
$('.otherRow .na-column input:radio', thisQuestion).trigger('click');
}
// Some styling...
$('input[type="text"]', thisQuestion).css({
'width': '50%'
});
// Handle the "Other" radios
$('input[type="text"]', thisQuestion).on('keyup change',function(event){
event.stopPropagation();
if($.trim($(this).val()) == '') {
$('.otherRow input:radio', thisQuestion).prop('checked',false);
$('.otherRow .na-column input:radio', thisQuestion).click();
}
else {
$('.otherRow .na-column input:radio', thisQuestion).prop('checked',false);
}
});
});
</script>
