Welcome to the LimeSurvey Community Forum

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

Hide checkbox but keep label

paulfiner
Topic Author
Offline
Premium Member

More

3 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
Offline
LimeSurvey Community Team

More

3 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
Offline
LimeSurvey Community Team

More

3 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
Topic Author
Offline
Premium Member

More

3 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
Offline
LimeSurvey Community Team

More

3 years 5 months ago - 3 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: 3 years 5 months ago by tpartner.

The topic has been locked.

paulfiner
Topic Author
Offline
Premium Member

More

3 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.

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

Hide checkbox but keep label

File Attachment:

Lime-years ahead

Legal

About Us

Open Source