Question

Jsfiddle is here

Please follow steps below in fiddle:

• Click on the “Open Grid” and select either the “Yes or No” or “True or False” option, you will see the relevant answer buttons appear underneath.

• Now if you look at the “Number of Answers” row it displays a string stating that “Only 1 Answer” can be chosen.

• Click on an answer button to turn it on and then click it again to
  turn it off so that no answer button is highlighted green.

• Click on the “Add Question” button, you realize that it has appended the control from the top into a table. No alert appears stating that you have selected less answers as that you have not highlighted one answer.

So the problem is that if you click on one of the answers “True or False” OR “Yes or No” to turn it on and then click on the same answer button again to turn it off, then when you click on the “Add Question” button, it does not perform the validation.

The reason I am assuming it is doing this is because when you click on a answer button for “True”, “False”, “Yes” or “No”, the hidden number of answers text input displays the number 1 as 1 answer is turned on (like the letter buttons), but then when you turn the button off, it displays 0 in the hidden text input as no answers are turned on.

What should happen is that as it is only one answer, if that string appears then the hidden text input should always display 1, no matter if there is no answer button is turned on as the user has to choose one answer. I think I have found out that the code below has caused the problem.

function updateAnswer(context, iQuestionIndex, bDisableAppend) {
    var _sCurrQ_Class = 'q_' + iQuestionIndex;
    var _oCurrAnswerContainer = jQuery('#answer_selections .' + _sCurrQ_Class);
    if (!_oCurrAnswerContainer.length) {
        _oCurrAnswerContainer = jQuery(document.createElement('div')).addClass(_sCurrQ_Class);
        !bDisableAppend && jQuery('#answer_selections').append(_oCurrAnswerContainer);
    }

    _oCurrAnswerContainer.html('');

    var value, id;
    // loop through all buttons with 'on' status and their info to the current answer container
    $('.answerBtnsOn', context).each(function (i, btn) {

        var $btn = $(btn);
        value = btn.value;
        id = $btn.attr('id');

        var n = $("input[name='value[" + id + "]']").length;
        var hid = "hidden" + id + n + "value";
        $(btn).attr("data-hid", hid);


        if (!bDisableAppend) {
            // append those values to the form
            var input = '<input type="checkbox" id="' + hid + '" name="value[' + iQuestionIndex + '][]" value="' + value + '" checked /><label for="' + hid + '">' + value + '</label>';
            _oCurrAnswerContainer.append(input);
        }
    });
}

My question is that in the jsfiddle, can anybody be able to get the fiddle working so that it will display the alert for when the user has not selected an answer after turning on and turning off answer button for “True or False” or “Yes or No”?

Answer 1

I think I’ve fixed it here, although your code is really messy. I added a conditional check to see if the number of selected answers is zero where it should be one – if so, just set the number that is set as value for .answerstxt to one.