Hiding submit button if multiple choice question not ticked

Could you just add in a response requirement on that question - it wouldn’t allow you to submit until the question was answered.

This code should do the trick.

Qualtrics.SurveyEngine.addOnReady(function() {

    // Hide next button initially
    jQuery("#NextButton").hide();

    // Show next button when choice is selected
    jQuery(".QuestionBody input[type='radio'], .QuestionBody input[type='checkbox']").on("change", function() {
        if (jQuery(this).is(":checked")) {
            jQuery("#NextButton").show();
        }
    });

});

Thanks jbk, that almost does the job. The only odd thing is that if I untick the checkbox the box itself disappears. If I click on where it was it reappears and is ticked. Any thoughts?

I added an else clause to your code in case it makes a difference, but there is no other script in the project.

else {jQuery("#NextButton").hide();}

Since you mentioned that only one choice will be displayed and from a respondent POV no one will unselect. 

The given code will hide the next button until a choice is selected, if you try to uncheck the selected choice, the next button will still appear. You can prevent the respondent moving forward without answering the question using “response requirement”.

Hi,

The behavior you observe when unchecking is not linked to ​@jbk’s script, it’s the default behavior when an item is unselected. You are probably using the legacy modern layout. Remove the script and it’ll do the exact same thing when you check/uncheck your choice.

If you need something a bit more robust that will work in all legacy layouts and NSTE, will be tied only to the question containing the choice (in case you have more than 1 question on the page) and will hide/show on selection, you can try this.

Qualtrics.SurveyEngine.addOnload(function () {
    this.hideNextButton();

    var questionInfo = this.getQuestionInfo();
    var choices = questionInfo.Choices;
    var firstChoiceId = Object.keys(choices)[0];

    console.log('Question ID:', this.questionId);
    console.log('All choices:', choices);
    console.log('First choice ID:', firstChoiceId);

    var self = this;

    this.questionclick = function (event, element) {
        console.log('Click event:', event);
        console.log('Clicked element:', element);

        // Traverse up the DOM to find the nearest checkbox input
        // Handles clicks on <span>, <label>, or <input> itself
        var checkbox = null;

        if (element.type === 'checkbox') {
            // Clicked directly on the checkbox input
            checkbox = element;
        } else {
            // Clicked on a child element (e.g. <span>), walk up to find checkbox
            var ancestor = element;
            while (ancestor) {
                // Check if the ancestor itself is a checkbox
                if (ancestor.tagName === 'INPUT' && ancestor.type === 'checkbox') {
                    checkbox = ancestor;
                    break;
                }
                // Check if the ancestor contains a checkbox (e.g. a <label>)
                var found = ancestor.querySelector('input[type="checkbox"]');
                if (found) {
                    checkbox = found;
                    break;
                }
                ancestor = ancestor.parentElement;
            }
        }

        console.log('Resolved checkbox:', checkbox);

        if (!checkbox) {
            console.log('No checkbox found in ancestor chain, ignoring click');
            return;
        }

        var selected = self.getSelectedChoices();
        console.log('Currently selected choices:', selected);

        if (selected.indexOf(firstChoiceId) !== -1) {
            console.log('First choice is selected → showing Next button');
            self.showNextButton();
        } else {
            console.log('First choice is not selected → hiding Next button');
            self.hideNextButton();
        }
    };
});

Thanks vgayraud, I hadn’t realised that was normal behaviour. The checkbox still disappears when unticked using your code, but then I switched to NSTE and it doesn’t.