Welcome to the LimeSurvey Community Forum

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

Hiding specific checkboxes in multiple choice & with comments

More
6 years 6 months ago #180734 by krosser
Hi guys,

I am trying to hide specific input items in multiple choice and multiple choice with comments. I have come across this old thread , but the script there does not work in LS 3.15 any more.

For some reason the part "input.checkbox" does not work, if added. I have adjusted the li. part that hides the element completely.

The multiple choice
Code:
<script charset="utf-8" type="text/javascript">      
  $(document).ready(function() {  
 
    $('#question{QID} li.question-item.answer-item.checkbox-item:eq(0)').css ({                     
      'display': 'none' 
    });
 
  });
</script>

The multiple choice with comments
Code:
<script charset="utf-8" type="text/javascript">      
  $(document).ready(function() {  
 
    $( '#question{QID} li.row.checkbox-text-item.form-group:eq(0)').css ({                     
      'display': 'none' 
    });
 
 
  });
</script>


Any help with updating the script would be much appreciated.
Sample survey attached.

File Attachment:

File Name: limesurvey...2-20.lss
File Size:21.11 KB

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.
More
6 years 6 months ago #180737 by tpartner
The HTML structure has changed in 3.x. This should work for both question types:

Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() { 
    $('#question{QID} .answers-list li:eq(0)').hide();
  });
</script>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
6 years 6 months ago #180743 by krosser

tpartner wrote: The HTML structure has changed in 3.x. This should work for both question types:

Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() { 
    $('#question{QID} .answers-list li:eq(0)').hide();
  });
</script>


This hides the answer choice but I wanted hide only the checkbox. But adding 'input.checkbox' does not work.
Code:
</script> <script type="text/javascript" charset="utf-8">
  $(document).ready(function() { 
    $('#question{QID} .answers-list li:eq(0) input.checkbox').hide();
 
  });
</script>

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.
More
6 years 6 months ago #180746 by tpartner
Maybe you could explain what you are trying to achieve. The check-boxes in 3.x are actually pseudo-elements in the labels but hiding those will not prevent checking the box - clicking on a visible label will toggle the box, regardless of visibility.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
6 years 6 months ago - 6 years 6 months ago #180749 by krosser
I would like to hide certain checkboxes, keeping the labels and the last checkbox, which is a "Do not know" exclusive answer choice.
In multiple choice with comments I will hide the comment box for the "Do not know" exclusive answer.

I don't need to prevent checking the boxes.

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
Last edit: 6 years 6 months ago by krosser.
The topic has been locked.
More
6 years 6 months ago #180750 by tpartner

I would like to hide certain checkboxes, keeping the labels and the last checkbox, which is a "Do not know" exclusive answer choice.


Add something like this to the question source:

Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() { 
    $('#question{QID} .answers-list li:eq(0)').addClass('hidden-checkbox');
  });
</script>

Add something like this to custom.css:

Code:
.hidden-checkbox label::before,
.hidden-checkbox label::after {
  display: none;
}

In multiple choice with comments I will hide the comment box for the "Do not know" exclusive answer.


Add something like this to the question source:

Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() { 
    $('#question{QID} .answers-list li:last input:text').hide();
  });
</script>



Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: krosser
The topic has been locked.
More
6 years 6 months ago #181155 by krosser
I have also tried to adjust the padding, using CSS, and this code has worked for the multiple choice with comments:
Code:
.checkbox-text-item.hidden-checkbox .checkbox-item,
.checkbox-text-item.hidden-checkbox .checkbox-item label {
  padding-left: 0;
}

For multiple choice without comments, this code worked:
Code:
.answers-list.hidden-checkbox .checkbox-item,
.answers-list.hidden-checkbox .checkbox-item label {
    padding-left: 0;
}

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.
More
6 years 6 months ago #181161 by DenisChenu
Question :

Did you try
Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() { 
    $('#question{QID} .answers-list li:eq(0) input:checkbox').addClass('invisible');
  });
</script>
?

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member. - Professional support - Plugins, theme and development .
I don't answer to private message.
The topic has been locked.
More
6 years 6 months ago #181179 by krosser

DenisChenu wrote: Question :

Did you try

Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() { 
    $('#question{QID} .answers-list li:eq(0) input:checkbox').addClass('invisible');
  });
</script>
?

I have tried this code, but adding the invisible class didn't hide the checkbox.

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.
More
6 years 6 months ago #181188 by tpartner
I think you need to hide the label pseudo elements, not the actual checkboxes.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: DenisChenu
The topic has been locked.
More
6 years 6 months ago #181190 by krosser
Well, you are right, I needed to hide the label pseudo elements. I haven't used the correct terminology in my response. Sorry about that.

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.
More
6 years 5 months ago #181232 by tpartner
So, now I'm lost. Does the code that I provided not work?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
6 years 5 months ago #181259 by krosser

tpartner wrote: So, now I'm lost. Does the code that I provided not work?

I does work, Tony. I just wanted to move the labels to the left, adjusting the padding. But the CSS code needed to be different for the simple multiple choice and multiple choice with comments. That's all.

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.
More
6 years 4 months ago #183169 by marcgold

krosser wrote: I have also tried to adjust the padding, using CSS, and this code has worked for the multiple choice with comments:

Code:
.checkbox-text-item.hidden-checkbox .checkbox-item,
.checkbox-text-item.hidden-checkbox .checkbox-item label {
  padding-left: 0;
}

For multiple choice without comments, this code worked:
Code:
.answers-list.hidden-checkbox .checkbox-item,
.answers-list.hidden-checkbox .checkbox-item label {
    padding-left: 0;
}


Hi

I have managed to hide the checkbox, but moving the label left didn't work. What I did notice is that the hyperlink on the label still activates the checkbox.

Can you explain how you managed to move the label as the code above doesn't seem to work in custom.css.

FYI LS version is 3.17

Thanks

marc
The topic has been locked.
More
6 years 4 months ago #183219 by tpartner
Can you please explain exactly what you are trying to accomplish with a mock-up, give your LimeSurvey version and attach a small sample survey (.lss file).

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
Moderators: tpartnerholch

Lime-years ahead

Online-surveys for every purse and purpose