Disable Hidden Boxes with Javascript | XM Community
Skip to main content
Hello

I am using the syntax below to hide boxes in a matrix table, however they can still be selected while hidden. How do I disable them as well?



$('QR~QIDx~1~2').up('td').childElements().invoke('hide');



I've tried replacing the word "hide" with "disable", but that doesn't work for multiple cells.



Thanks,
@TriciaB

Does adding `.prop("disabled",true)` to your JS help?

So it should look something like this:



```

$('QR~QIDx~1~2').up('td').childElements().prop("disabled",true).invoke('hide');

```

That should hide and disable the elements you designate.



A less elegant way with a bit more code would be to write the "hide" and "disable" for each appropriate cell in your matrix.



```var cell = "1~2";

jQuery(("#QR~"+this.questionId+"~"+cell).replace(/~/g, "\\\\~")).closest("td").find("*").prop("disabled",true).hide();

```
Thanks @C_Bohn, but that doesn't seem to work. It just crashes and doesn't even hide the cell.
@TriciaB .

I wonder if we approach it from a different angle if it would help.

For example, let's say I have a 3x3 matrix:



!



Let's say that I also want to hide and disable the following cells: row 1 column 1, row 2 column 2, row 3 column 2, and row 3 column 3.



In the JavaScript, I would build out the following under ".addOnLoad".



<code>

Qualtrics.SurveyEngine.addOnload(function()

{

var cell = "1~1";

jQuery(("#QR~"+this.questionId+"~"+cell).replace(/~/g, "\\\\~")).closest("td").find("*").prop("disabled",true).hide();

var cell = "2~2";

jQuery(("#QR~"+this.questionId+"~"+cell).replace(/~/g, "\\\\~")).closest("td").find("*").prop("disabled",true).hide();

var cell = "3~2";

jQuery(("#QR~"+this.questionId+"~"+cell).replace(/~/g, "\\\\~")).closest("td").find("*").prop("disabled",true).hide();

var cell = "3~3";

jQuery(("#QR~"+this.questionId+"~"+cell).replace(/~/g, "\\\\~")).closest("td").find("*").prop("disabled",true).hide();

});

</code>



What results in the survey view is a cell that is hidden and disabled.



!
None of these worked for me. I could hide options, but if I tried to disable them, they wouldn't even hide anymore. My solution was to hide the options, then add custom validation that didn't allow choosing a hidden option, with the message "Please choose a valid option".

Leave a Reply