Hiding submit button if multiple choice question not ticked

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();
        }
    };
});