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:
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:
Topic Author
)
