Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Combination of numeric input and checkboxes in a question

giniwe
Topic Author
Offline
New Member

More

3 years 2 months ago #212119 by giniwe

Combination of numeric input and checkboxes in a question was created by giniwe

Hello

I would like to combine a numeric input with two checkbox fields in a question. Each of the checkbox fields should represent an exclusive option. With the help of previous forum contributions, I have already been able to edit the source code of the question in this way:

Code:

Question? <script type="text/javascript" charset="utf-8">
 
    $(document).on('ready pjax:scriptcomplete',function(){
 
        // Identify this question
        var thisQuestion = $('#question{QID}');
        var lastInput = $('input:text:last', thisQuestion);
        var lastItem = $(lastInput).closest('div');
 
        // Insert the check-box
        $(lastItem).addClass('checkbox-item with-inserted-checkbox').append('<input type="checkbox" name="insertedInput" id="insertedInput" value=""><label for="insertedInput" class="checkbox-label control-label"></label>');
      
        
        // Listener on the checkbox
        $(':checkbox', lastItem).on('change', function(e) {
            if($(this).is(':checked')) {
                $('input:text', thisQuestion).not(lastInput).val('').trigger('keyup');
                $(lastInput).val(100).trigger('keyup');
                $('li.ls-group-dynamic', thisQuestion).hide();
            }
            else {
                $('li.ls-group-dynamic', thisQuestion).show();
                $(lastInput).val('').trigger('keyup');
            }
        });
        
    });
</script>
<style type="text/css">.numeric-multi .with-inserted-checkbox input.form-control {
        position: absolute;
        left: -9999em;
    }
 
    .numeric-multi .with-inserted-checkbox label::before,
    .numeric-multi .with-inserted-checkbox label::after {
        margin: -7px 0 0 0;
    }
</style>

However, the problem is that I can't manage to manipulate the second last input so that it is displayed as a checkbox.

Already thanks a lot for the help!

Attachments: