I would use a multiple-choice-with-comments type question and insert this script which will:
- Remove the second and third text inputs
- Render the text input numeric-only
- Enforce a maximum number of characters for the text input
- Add a suffix for the text input
- Render check-boxes exclusive
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
// Identify this question
var thisQuestion = $('#question{QID}');
// Remove the second and third text inputs
$('input:text.form-control:gt(0)', thisQuestion).remove();
// Listener on the text input
$('input:text.form-control', thisQuestion).on('keyup change', function(e) {
var thisValue = $.trim($(this).val());
// Strip out non-numerics characters
newValue = thisValue.replace(/\D/g,'').replace(/,/g,'').replace(/\./g,'');
$(this).val(newValue);
});
// Size and max characters for the text input
$('input:text', thisQuestion).attr('size', 3).attr('maxlength', 3);
// Suffix for the text input
$('input:text', thisQuestion).css({
'display': 'inline-block',
'margin-right': '0.5em'
})
.after('Tag(e) pro Jahr');
// Render answers exclusive
$('input:checkbox', thisQuestion).on('change', function(e) {
if($(this).is(':checked')) {
var thisRow = $(this).closest('.checkbox-text-item');
$('.checkbox-text-item', thisQuestion).not(thisRow).each(function(i) {
console.log(i);
var thisCheckbox = $('input:checkbox', this);
var thisText = $('input:text', this);
$('input:text', this).val('');
$('input:hidden', this).val('');
$('input:checkbox', this).prop('checked', false);
});
}
});
});
</script>
Sample survey attached:
