I guess this seems rather simple to do but I found it to be rather painful.
I used the following script in the HTML head tag of a select question.
<script src="[%GraphicsPath()%]jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function(){
jQuery(".group_header").parents("tr.clickable").each(function(index) {
var HeaderRowObj = jQuery(this);
HeaderRowObj.removeClass("clickable");
HeaderRowObj.addClass("group_header_row");
var InputObj = HeaderRowObj.find("input");
InputObj.addClass("HideElement"); //Make sure it is hidden
var GroupHeaderObj = HeaderRowObj.find(".group_header");
HeaderRowObj.html("<td colspan='2'>" + GroupHeaderObj.html() + "</td>");
HeaderRowObj.prepend(InputObj);
});
});
</script>
I created an additional code (code 10) in my parent list as such ...
<span class="group_header"></span>
Within my constructed list, I would include code 10 in the correct position.
This all worked on a desktop / laptop.
I would see ...
Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
<blank>
None of these
On a mobile phone, the blank line / row was ignored.
I would see ...
Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
None of these
Does anyone have a better solution?
Thank you.