Disable the checkbox in the free format questions

Question

Hello,

We are programming a free format MBC. We want to add a function as follows:  
1. Initially only the first checkbox can be checked and the rest of the checkboxes are disabled.
2. Once respondents check the first checkbox, the rest of the checkboxes are enabled.

That means respondents have to pick the first item before they can pick other items. Is this doable? Can anyone please share any suggestions? Many thanks!

Answer 1

This can be done with some JavaScript, but the exact code will depend on whether or not you are using graphical radio buttons and checkboxes in your study settings.  I'm going to assume you have this setting on, as is default in Lighthouse Studio.

You'll want to start by adding a copy of the Better Lighthouse Library to the same page as your free format question.  You can download the question and import it into your question library from here:

https://sawtoothsoftware.com/resources/question-library/better-lighthouse-library

Then you should be able to get the behavior you're after by adding this script to your free format question:

<script>
$(document).ready(updateCheckboxes);
$(document).on('lighthouseCheckboxChanged', updateCheckboxes);

function updateCheckboxes() {
    // Parameters
    var variable = 'CheckVar';
    
    // Run
    var firstChecked = SSI_GetValue('[% QuestionName() %]_' + variable + '_1');
    $('input[id^=[% QuestionName() %]_' + variable + '_]:not(#[% QuestionName() %]_' + variable + '_1)').each(function(){
        SSI_ToggleRadioButtonOrCheckbox(this.id, firstChecked);
        if (!firstChecked) {
            SSI_SetSelect(this.id, false);
        }
    });
}
</script>

"CheckVar" should be replaced with the name of the free format variable you want this functionality to affect.

Comments

Zachary,

Your code works perfectly! Appreciate your help!  A new problem pops up after I apply your code. Before adding a copy of the Better Lighthouse Library and your code, I have the code below to calculate the total price and it works well. After I add a copy of the Better Lighthouse Library and your code, the code below somehow doesn't work. I suspect  "SSI_CustomGraphicalCheckbox" is the cause. Can you please provide any suggestions on how to fix it? Thanks again!

<script type="text/javascript">
<!--
function SSI_CustomGraphicalCheckbox(GraphicalCheckboxObj, InputObj, blnCheck)
{
    SumValues();
}

$('#[% QuestionName() %]_div input').keyup(SumValues);

function SumValues()
{
    var sum = 0;
    for (var i = 1; i <= 9; i++) {
        var variable = '[% QuestionName() %]_a_' + i;
        if (SSI_GetValue(variable)) {
            var price = parseFloat(Prices[variable]);
            switch (i) {
                case 5:
                    price *= SSI_GetValue('[% QuestionName() %]_users');
                    break;
                case 8:
                    price *= SSI_GetValue('[% QuestionName() %]_tags');
                    break;
            }
            sum += price;
        }
    }
    sum = SSI_RoundNumber(sum, 2);
    $("#total").html(SSI_PriceFormat(sum, ",", ".", 2));
}

SumValues();
//-->
</script>

---

The Better Lighthouse Library is incompatible with SSI_CustomGraphicalRadiobox and SSI_CustomGraphicalCheckbox.  If you look in the "RADIO BUTTON AND CHECKBOX EVENTS" section of the BLL code, you can find examples on how to convert existing code from the old way of doing things to the new.  Can you apply that change to your SSI_CustomGraphicalCheckbox script?

---

Yes. I found the examples in the BLL code. Now everything works well. Thanks again for your help!

---

Hi Zachary,

Your code works great! However, the hover over (tool tip) is disabled for the rest of the checkboxes too. Respondents are not able to use the hover over unless they check the first checkbox. Is it possible to enable the tooltip for those disabled checkboxes? Thanks again!

---

We might need to take another approach if we need to support tooltips.  Try this:

<style>
.disabledCheckbox {
    opacity: 0.5;
}
</style>

<script>
$(document).ready(updateCheckboxes);
$(document).on('lighthouseCheckboxChanged', updateCheckboxes);

function updateCheckboxes() {
    // Parameters
    var variable = 'CheckVar';
    
    // Run
    if (SSI_GetValue('[% QuestionName() %]_' + variable + '_1')) {
        $('#[% QuestionName() %]_div .disabledCheckbox').removeClass('disabledCheckbox');
    }
    
    else {
        $('input[id^=[% QuestionName() %]_' + variable + '_]:not(#[% QuestionName() %]_' + variable + '_1)').each(function(){
            $(this).closest('tr').addClass('disabledCheckbox');
            if (SSI_GetValue(this.id)) {
                SSI_SetSelect(this.id, false);
            }
        });
    }
}
</script>

---

Thank you so much! This is really helpful! Appreciate it.