Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Disable Select Questions in ACBC Conditional Display

I am trying to disable the response select for a few attributes in an ACBC question based on what brand the respondent selects. The idea is for the respondent to choose between two brands. When they select a brand, some attributes gray out and they are unable to select that response.

I have used the Conditional Display to write several variations of Javascript to accomplish this, but I have not been able to disable the select function that is in the <tr class="clickable"> (at least that's what I think I need to disable).

<script>

    document.getElementsByTagName("tr")[3].disabled = true;  


/*document.getElementById("Pricing2018_BYO_3_1_label").style.color = 'red';
document.getElementByClassName("acbc_byo_price_text").style.color = 'red';
document.getElementById("Pricing2018_BYO_3_1_label").disabled = 'true';  */

    
</script>
asked Oct 16 by Justin

1 Answer

0 votes
 
Best answer
Please try adding this code anywhere on the page:

<style>
.clickable {
    display: block;
    position: relative;
}

.disabledGraphicalOverlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    cursor: default;
}
</style>

<script>
function SSI_DisableGraphicalInput(id) {
    $('#' + id).closest('.clickable').append('<div class="disabledGraphicalOverlay"></div>');
    $('.disabledGraphicalOverlay').click(function(event){
        event.stopPropagation();
    });
    $('#' + id).closest('.clickable').find('.text_input, textarea').prop('disabled', true);
    $('#' + id).siblings('.graphical_select').css('opacity', 0.5);
}

function SSI_EnableGraphicalInput(id) {
    $('#' + id).closest('.clickable').find('.disabledGraphicalOverlay').remove();
    $('#' + id).closest('.clickable').find('.text_input, textarea').prop('disabled', false);
    $('#' + id).siblings('.graphical_select').css('opacity', 1);
}
</script>


Then you can disable to radio buttons in your own JavaScript by calling the disable function like this:

SSI_DisableGraphicalInput('AcbcExer_BYO_1_1');
answered Oct 16 by Zachary Platinum Sawtooth Software, Inc. (63,675 points)
Thanks for your help! This worked perfectly for the selection issue I was having. I used style.color to change font color when one brand is selected. Now I just need to figure out a way to reset the attributes if the respondent selects another brand in the middle of building their plan.

Thanks again, kind stranger
You're welcome.  The built-in function SSI_RadioReset combined with the above SSI_EnableGraphicalInput may be of use to you.
...