Have an idea?

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

Disable a radio button in a grid based on an answer in current question

I have tried this code to disable/enable a radio button based on whether an answer is entered in an "other specify" text box, but it is not working.  Does anyone have any advice or solution to make this work?

Thank you in advance.


<script>
var radioResps = {};

$(document).ready(function(){
    $('input[name="hid_row_list_[% QuestionName() %]"]').val().split(',').forEach(function(row){
        radioResps['[% QuestionName() %]_r' + row] = SSI_GetValue('[% QuestionName() %]_r' + row);
    })
})

function SSI_CustomGraphicalRadiobox(graphical, input) {
    if (radioResps[input.name] == input.value) {
        SSI_RadioReset(input.name);
    }
    radioResps[input.name] = SSI_GetValue(input.name);
}
</script>

<style>
.clickable {
      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>


<script>



if (SSI_GetValue("qs9_r8_other") == "")
{
    $(document).ready(function()
     {
      SSI_DisableGraphicalInput('qs9_r8_1');
     })
}
else
{
     $(document).ready(function()
     {
      SSI_EnableGraphicalInput('qs9_r8_1');
     })
      
} 


</script>

asked Oct 21 by Bryan

1 Answer

0 votes
Two thoughts:

It looks like you're using some older code from the forum to handle enabling and disabling inputs.  This code probably works fine, but I usually advise using the latest code in case the older code proved to have any problems.  In this case, the latest code is in the "Better Lighthouse Library" from the Community Question Library.  You can download it here and add a copy of the question to your page:

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

I'm glad to see you've taken a stab at the code yourself.  Your "if" / "else" logic seems fine, but now we need to tell the browser when to run this code.  This will involve two events: document.ready to handle when the page loads (which I see you've already used) and a keyup event to handle when the user enters or deletes text from the other specify field.

This script should handle those two events and work with the BLL:

<script>
function disableOrEnableRadioButton() {
    SSI_ToggleRadioButtonOrCheckbox('[% QuestionName() %]_r8_1', SSI_GetValue('[% QuestionName() %]_r8_other'));
}

$(document).ready(disableOrEnableRadioButton);
$(document).on('keyup', '#[% QuestionName() %]_r8_other', disableOrEnableRadioButton);
</script>


If you have other radio buttons you want conditionally disabled, you can add them after line 3.
answered Oct 21 by Zachary Platinum Sawtooth Software, Inc. (156,375 points)
Hiding the radio button
...