Here's the code I am using:
<script type="text/javascript" charset="utf-8">
// Wait until the document is fully loaded
$(document).ready(function() {
/********************** SETTINGS **********************/
// The text to appear in the warning element
var warningText = 'Please answer 3 to continue';
// The question ID
var questionId = 2326;
// The minimum number of answers required
var minNumber = 3;
/******************************************************/
// Create the warning element and place it after the submit button
var el = document.createElement('div');
el.setAttribute('id','warning');
document.body.appendChild(el);
$( '#warning' ).css({
'border':'1px solid #333333',
'width':'200px',
'padding':'3px',
'color':'red'
});
$('#warning').html(warningText);
$('input[type="submit"]').after($('#warning'));
// Detect the initial number of checked answers & display Next/Submit button accordingly
var inputInitCount = 0;
$('#question' + questionId + ' input').each(function(i) {
if ($( this ).attr('checked') == true ) {
inputInitCount++;
}
});
if (inputInitCount > (minNumber - 1)) {
$('input[type="submit"]').show();
$('#warning').hide();
}
else {
$('#warning').show();
$('input[type="submit"]').hide();
}
// Listener to detect number of checked answers & display Next/Submit button accordingly
$('#question' + questionId + ' input').click(function() {
var inputCount = 0;
$('#question' + questionId + ' input').each(function(i) {
if ($( this ).attr('checked') == true ) {
inputCount++;
}
});
if (inputCount > (minNumber - 1)) {
$('input[type="submit"]').show();
$('#warning').hide();
}
else {
$('#warning').show();
$('input[type="submit"]').hide();
}
// The original functions of the click event
checkconditions(this.value, this.name, this.type);
});
});
</script>
I've checked the inputCount variable and it gets incremented but it also gets incremented if a user changes their option in a particular column. The crux of the problem is I just need to count the total number of boxes ticked and proceed if this is 3.