Have an idea?

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

Remove Radio Button on Single Select

Would we need updated code to do the same type of thing with a single select question?
related to an answer for: Remove Check Boxes on MultiSelect Question
asked Jun 18, 2021 by Liz (160 points)

1 Answer

0 votes
Try this:

<style>
#[% QuestionName() %]_div .input_cell {
    display: none;
}

.selectedImg {
    border: 1px solid blue;
}
</style>

<script>
$(document).ready(SSI_CustomGraphicalRadiobox);
function SSI_CustomGraphicalRadiobox() {
    $('#[% QuestionName() %]_div .selectedImg').removeClass('selectedImg');
    $('#[% QuestionName() %]_' + SSI_GetValue('[% QuestionName() %]')).closest('.clickable').find('img').addClass('selectedImg');
}
</script>
answered Jun 18, 2021 by Zachary Platinum Sawtooth Software, Inc. (205,575 points)
Great! This is sort of working but we actually have multiple single select questions on one page so when this code is added to the footer of each question it is only working for the last "question" on the page. Do you know how the code would need to be updated to fix that?
Try this modification:

<style>
#[% QuestionName() %]_div .input_cell {
    display: none;
}

.selectedImg {
    border: 1px solid blue;
}
</style>

<script>
$(document).ready(SSI_CustomGraphicalRadiobox);
function SSI_CustomGraphicalRadiobox(graphical, input) {
    $('.question.select').each(function(){
        var name = this.id.replace(/_div$/, '');
        $('#' + name + '_div .selectedImg').removeClass('selectedImg');
        $('#' + name + '_' + SSI_GetValue(name)).closest('.clickable').find('img').addClass('selectedImg');
    });
}
</script>
This worked - thank you so much!
Actually - one more thing. Because we have multiple questions on one page but still are treating this as one single select we need to allow respondents to "unselect" a selection by clicking on that item again. Is there additional code you can provide to allow this?
This is the kind of ugly approach I've taken to this before:

https://legacy.sawtoothsoftware.com/forum/28578/deselect-radio-button

Modified for what you are doing:

<style>
#[% QuestionName() %]_div .input_cell {
    display: none;
}

.selectedImg {
    border: 1px solid blue;
}
</style>

<script>
$(document).ready(function(){
    var resps = {};
    $('input[type="radio"]').each(function(){
        var name = $(this).attr('name');
        resps[name] = SSI_GetValue(name);
    });
    
    var run = function() {
        $('.question.select').each(function(){
            var name = this.id.replace(/_div$/, '');
            $('#' + name + '_div .selectedImg').removeClass('selectedImg');
            $('#' + name + '_' + SSI_GetValue(name)).closest('.clickable').find('img').addClass('selectedImg');
        });
    };
    run();
     
    SSI_CustomGraphicalRadiobox = function(graphical, input) {
        var name = input.name;
        var resp = SSI_GetValue(name);
        if (resp == resps[name]) {
            SSI_RadioReset(name);
            resp = 0;
        }
        resps[name] = resp;
        run();
    };
})
</script>
...