Hide/Disable a dropdown in a grid

Hi all ... to disable a dropdown in a grid, do I use the SSI_DisableRadioButtonOrCheckbox function? I have BLL in my project. Here's what I have:

[code}
<script>
$(document).ready(function(){
SSI_DisableRadioButtonOrCheckbox('Q21b_r1_c3');
SSI_DisableRadioButtonOrCheckbox('Q21b_r1_c4');
})
</script>
[/code]

asked Jan 13 by Marion Silver (5,240 points)

And that doesn't work. How do I do this? Disable or hide is fine by me.

commented Jan 13 by Marion Silver (5,240 points)

1 Answer

Those helper methods in the BLL are necessary because Lighthouse Studio uses special inputs for radio buttons and checkboxes. Dropdowns are a lot simpler, so we can just use simple JS / jQuery. Try using this script, which disables one field and hides the other:

<script>
$(document).ready(function(){
    $('#Q21b_r1_c3').prop('disabled', true);
    $('#Q21b_r1_c4').hide();
})
</script>

answered Jan 13 by Zachary Platinum

(202,850 points)

Hi Zachary. Thanks ... Disabled works, but Hide doesn't.

Any easy way to disable the "require response" for those cells? I'd usually just untick Require Response for that row and use validation to make sure the other cells are answered, but if there's a more elegant solution I'd love to know.

commented Jan 13 by Marion Silver (5,240 points)

Hiding seems to work on my machine. If you decide that is the route you want to go down, I'll need more help in seeing the problem.

The way you're describing is how I'd probably do it. The client (JavaScript) doesn't have the power to change what the server requires, so there's no JS I can write the will undo the server's require response verification. The closest I could do would be to invisibly respond to these fields with a dummy response so that the server would be satisfied that it got an answer.

commented Jan 13 by Zachary Platinum

(202,850 points)

Yeah, validation is quick and easy to do so that's OK.

Weird how hiding works for you and not for me, but disabled works for us both. First thing I checked was that I got the ID right. Disabling works for both c3 and c4 so not as simple as a mistyped ID. I DO have other things going on on that page to control the width of the dropdown cells. That could be affecting things. Here's the whole thing:

<style>
.grid .col_label_cell {
    vertical-align: top;
}
</style>

<style>
#[% QuestionName() %]_div {
    display: none;
}
</style>
 
<script>
$(document).ready(function(){
    $('#[% QuestionName() %]_div select').selectmenu({
        width: 80
    });
    $('#[% QuestionName() %]_div').show();
})
</script>


<style type="text/css">
.mobile_grid_card .option_cell {
        display: inline-block;
        width: 50%;
}

.mobile_grid_card .input_cell {
        display: inline;
        width: 50%;
}
</style>

<script>
$(document).ready(function(){
        $('#Q21b_r1_c3').prop('disabled', true);
        $('#Q21b_r1_c4').prop('disabled', true);        
        $('#Q21b_r1_c4').hide();
})
</script>

commented Jan 13 by Marion Silver (5,240 points)

That would do it. jQuery UI's "selectmenu" tool works by (1) hiding the original dropdown element, (2) showing a better looking dropdown element in its place, and (3) using code to connect the original and new elements. Our "#Q21b_r1_c4" refers to the original dropdown, not the new one. It seems that when we disable the original, jQuery UI is clever enough to disable the new element for us. But when we hide the original, the new one continues to display as normal.

jQuery UI always puts its dropdown immediately after the original, so we can hide the new element rather than the original by telling JavaScript to look at the next element instead:

$('#Q21b_r1_c4').next().hide();

commented Jan 13 by Zachary Platinum

(202,850 points)

Beautiful! Thanks. Works a treat.

commented Jan 13 by Marion Silver (5,240 points)

And thanks for the handy lesson too.

commented Jan 13 by Marion Silver (5,240 points)

Most popular tags

Have an idea?

Hide/Disable a dropdown in a grid

Your comment on this question:

Your solution to the original question

1 Answer

Your comment on this answer: