Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Hide checkbox but keep label

  • paulfiner
  • paulfiner's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
4 years 5 months ago #207529 by paulfiner
Hide checkbox but keep label was created by paulfiner
I'm using the multiple-choice with comments type question to try and show some sub-headings.
I've managed to hide the comment boxes but I'm struggling to hide the checkbox on the first row.
I'm using Limesurvey v2.73

Here's my javascript:
Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() { 
        var thisQuestion = $('#question{QID}');
  // Remove some text inputs
    $('.checkbox-text-item:eq(0) .comment-container', thisQuestion).remove();
                $('input:checkbox:eq(0)', thisQuestion).remove();   <-- This line doesn't work, what do I need?
 
$('.checkbox-text-item:eq(1) .comment-container', thisQuestion).remove();
$('.checkbox-text-item:eq(2) .comment-container', thisQuestion).remove();
$('.checkbox-text-item:eq(3) .comment-container', thisQuestion).remove();
$('.checkbox-text-item:eq(4) .comment-container', thisQuestion).remove();

Thanks
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 5 months ago #207531 by Joffm
Replied by Joffm on topic Hide checkbox but keep label
Hi,
I have this:
Code:
<script charset="utf-8" type="text/javascript">
  $(document).ready(function() {
    $( '#question{QID} .question-item:eq(0)').addClass('hide-pseudo-elements').find('input.checkbox').remove();
    $( '#question{QID} .question-item:eq(4)').addClass('hide-pseudo-elements').find('input.checkbox').remove();
    $( '#question{QID} .question-item:eq(7)').addClass('hide-pseudo-elements').find('input.checkbox').remove();
    $( '#question{QID} .question-item:eq(0)').addClass('hide-pseudo-elements').find('.comment-container').remove();
    $( '#question{QID} .question-item:eq(4)').addClass('hide-pseudo-elements').find('.comment-container').remove();
    $( '#question{QID} .question-item:eq(7)').addClass('hide-pseudo-elements').find('.comment-container').remove();
 
  });
</script>
Code:
<style type="text/css">.hide-pseudo-elements label::before,
.hide-pseudo-elements label::after {
  display: none;
}
 
.hide-pseudo-elements .label-text {
  margin-left: -20px;
}
</style>



Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 5 months ago #207532 by tpartner
Replied by tpartner on topic Hide checkbox but keep label
The problem is that the labels have pseudo-elements for the checkboxes so you also need to remove those:

Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() { 
        var thisQuestion = $('#question{QID}');
 
    // Remove a checkbox
    $('input:checkbox:eq(0)', thisQuestion).remove();
    $('td.checkbox:eq(0)', thisQuestion).removeClass('checkbox');
 
    // Remove some text inputs
    $('.checkbox-text-item:eq(0) .comment-container', thisQuestion).remove(); 
    $('.checkbox-text-item:eq(1) .comment-container', thisQuestion).remove();
    $('.checkbox-text-item:eq(2) .comment-container', thisQuestion).remove();
    $('.checkbox-text-item:eq(3) .comment-container', thisQuestion).remove();
    $('.checkbox-text-item:eq(4) .comment-container', thisQuestion).remove();
  });
</script>

Having said that, there is a ton of garbage HTML in that version so I think you would be better off inserting new table rows as the sub-headers:

Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() { 
        var thisQuestion = $('#question{QID}');
    // Remove some text inputs
    $('.checkbox-text-item:eq(0) .comment-container', thisQuestion).remove();
    $('.checkbox-text-item:eq(1) .comment-container', thisQuestion).remove();
    $('.checkbox-text-item:eq(2) .comment-container', thisQuestion).remove();
    $('.checkbox-text-item:eq(3) .comment-container', thisQuestion).remove();
 
    // Insert sub-headings
    $('tr.answer-item:eq(0)', thisQuestion).before('<tr class="inserted-sub-heading"><th colspan=2>Sub-heading 1</th></tr>');
    $('tr.answer-item:eq(3)', thisQuestion).before('<tr class="inserted-sub-heading"><th colspan=2>Sub-heading 2</th></tr>');
  });
</script>



Sample survey attached:

File Attachment:

File Name: limesurvey...1714.lss
File Size:18 KB
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • paulfiner
  • paulfiner's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
4 years 5 months ago #207534 by paulfiner
Replied by paulfiner on topic Hide checkbox but keep label
Thanks Tony and Joffm. I went with your last suggestion Tony and it seems to be working fine. I've set up a new server with the latest V3 so I'll slowly be transitioning over to it.

Cheers,
Paul
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 5 months ago - 4 years 5 months ago #207536 by tpartner
Replied by tpartner on topic Hide checkbox but keep label
In 3.x, you will need to use something like this:

Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() { 
        var thisQuestion = $('#question{QID}');
    // Remove some text inputs
    $('.checkbox-text-item:eq(0) .comment-item', thisQuestion).remove();
    $('.checkbox-text-item:eq(1) .comment-item', thisQuestion).remove();
    $('.checkbox-text-item:eq(2) .comment-item', thisQuestion).remove();
    $('.checkbox-text-item:eq(3) .comment-item', thisQuestion).remove();
 
    // Insert sub-headings
    $('.checkbox-text-item:eq(0)', thisQuestion).before('<li class="inserted-sub-heading">Sub-heading 1</li>');
    $('.checkbox-text-item:eq(3)', thisQuestion).before('<li class="inserted-sub-heading">Sub-heading 2</li>');
  });
</script>

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 4 years 5 months ago by tpartner.
The topic has been locked.
  • paulfiner
  • paulfiner's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
4 years 5 months ago #207540 by paulfiner
Replied by paulfiner on topic Hide checkbox but keep label
That's great! I have a feeling I'll have a few more of these upgrade queries over the next few weeks!
Cheers
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source