- Posts: 10109
- Thank you received: 3593
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Disable radio buttons after selection
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
7 years 10 months ago - 7 years 10 months ago #136891
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Disable radio buttons after selection
Okay, that was a typo on my part - forgot the $(document).ready() function.
Here is an extended version that:
1) Fixes the core event handler on the label div elements (that should never act on disabled radios)
2) Adds a class to all disabled answer rows so they can be styled as in the CSS example below
3) Handles the "Other" text input
3) Handles initial states in case of returning to the group
Script:
CSS:
Modified test survey:
Here is an extended version that:
1) Fixes the core event handler on the label div elements (that should never act on disabled radios)
2) Adds a class to all disabled answer rows so they can be styled as in the CSS example below
3) Handles the "Other" text input
3) Handles initial states in case of returning to the group
Script:
Code:
<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ // A function to disable all non-checked radios function handleDisableNonChecked(thisRadio) { var thisRow = $(thisRadio).closest('.answer-item'); // Disable non-checked radios $('#question{QID} input.radio').not(thisRadio).prop('disabled', true); // Handle "Other" text input if($('input.text', thisRow).length == 0) { $('#question{QID} input.text').prop('disabled', true); } // Add a class to the disabled rows $('#question{QID} .answer-item').not(thisRow).addClass('disabled-row'); } // Initial state (in case of returning to page if($('#question{QID} input.radio:checked').length > 0) { handleDisableNonChecked($('#question{QID} input.radio:checked')); } // Listener on the radios $('#question{QID} input.radio').on('click', function(e){ handleDisableNonChecked(this); }); // Fix the core event handler for the label div $('#question{QID} .label-clickable').unbind('click').on('click', function(e){ if(!$(this).parent().find('input.radio').is(':disabled')) { $(this).parent().find('input.radio').trigger('click'); } }); }); </script>
CSS:
Code:
.disabled-row .label-clickable{ opacity: 0.45; cursor: not-allowed; }
Modified test survey:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 7 years 10 months ago by tpartner.
The topic has been locked.
- Deusdeorum
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 72
- Thank you received: 17
7 years 10 months ago - 7 years 10 months ago #136897
by Deusdeorum
Replied by Deusdeorum on topic Disable radio buttons after selection
Really nice answer Tony, your first
solution
worked up until I read
So your latter solution is preferred and works great!3) Handles initial states in case of returning to the group
Last edit: 7 years 10 months ago by Deusdeorum.
The topic has been locked.
- holch
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 11658
- Thank you received: 2742
7 years 10 months ago #136913
by holch
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
Replied by holch on topic Disable radio buttons after selection
I tried it without adding the CSS to the template and it seems to work fine. I assume the css only makes the lables less visible, right?
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3593
7 years 10 months ago #136919
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Disable radio buttons after selection
Correct, and in supporting browsers the cursor will be a red circle with a diagonal line.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.