Block columns on Side by Side question based on previous column answers

Right click in column 2, select display logic, set the condition(s). Repeat in column 3 

Hi, thanks for the reply!

I tried that and it didn’t work, I’m guessing because in doing so we are working with the logics of the questions, not with the logics of the table/columns itself.

The question is the entirety of the table (side by side question), so changing the logic of it wouldn’t really accomplish what I’m looking for :/ 

@omkarkewat Thank you so much for your reply and help! 

The goal is not exactly to disable column 2 and 4 if any of the value is selected in column 1 and 3 respectively, but it’s something very close to that.

What I want to do is disable column 2 and 4 if the respondent chooses only the first option/value in column 1 (“Nunca fantasiei com isto”) and 3 (“Nunca fiz isto”), respectively! 

Is there any way to adapt the code you provided me in that direction? 

Thank you again, your help is very valuable for my work :)

hi @InesV can you try the below code.

 

Qualtrics.SurveyEngine.addOnReady(function () {
    const quest = this;
    const qc = quest.questionContainer;

    const sbs_column_toggle = function (control_column, target_column) {
        const control_options = qc.querySelectorAll(".Choice .SBS" + control_column);

        control_options.forEach((item) => {
            item.addEventListener(
                "change",
                (el) => {
                    let target_row;
                    el.target.ancestors().forEach((item) => {
                        if (item.classList.contains("Choice")) {
                            target_row = item;
                        }
                    });
                    const row_target_column = target_row.querySelectorAll(".SBS" + target_column);
                    setTimeout(() => {
                        if (el.target.value === "1") {
                            row_target_column.forEach((cell) => {
                                cell.disabled = true;
                                cell.style.opacity = "0.5";
                                cell.style.pointerEvents = "none";
                                cell.querySelectorAll(".q-checked").forEach((button) => button.classList.remove("q-checked"));
                            });
                        } else {
                            row_target_column.forEach((cell) => {
                                cell.disabled = false;
                                cell.style.opacity = "";
                                cell.style.pointerEvents = "";
                            });
                        }
                    }, 100);
                },
                false
            );
        });
    };

    // Assuming the first dropdown in column 1 controls the second dropdown in column 2
    sbs_column_toggle(1, 2); // Disable column 2 if the first option in column 1 is selected
    // Assuming the third dropdown in column 3 controls the fourth dropdown in column 4
    sbs_column_toggle(3, 4); // Disable column 4 if the first option in column 3 is selected
});

@omkarkewat I adapted the code you gave me and came up with the following: 

Qualtrics.SurveyEngine.addOnReady(function () {
    const quest = this;
    const qc = quest.questionContainer;

    const sbs_column_toggle = function (control_column, target_column, target_value) {
        const control_options = qc.querySelectorAll(".Choice .SBS" + control_column);

        control_options.forEach((item) => {
            item.addEventListener(
                "change",
                (el) => {
                    let target_row;
                    el.target.ancestors().forEach((item) => {
                        if (item.classList.contains("Choice")) {
                            target_row = item;
                        }
                    });
                    const row_target_column = target_row.querySelectorAll(".SBS" + target_column);
                    setTimeout(() => {
                        if (el.target.value === target_value) {
                            row_target_column.forEach((cell) => {
                                cell.disabled = true;
                                cell.style.opacity = "0.5";
                                cell.style.pointerEvents = "none";
                                cell.querySelectorAll(".q-checked").forEach((button) => button.classList.remove("q-checked"));
                            });
                        } else {
                            row_target_column.forEach((cell) => {
                                cell.disabled = false;
                                cell.style.opacity = "";
                                cell.style.pointerEvents = "";
                            });
                        }
                    }, 100);
                },
                false
            );
        });
    };

    // Disable column 2 if "1" is selected in column 1
    sbs_column_toggle(1, 2, "1");

    // Disable column 4 if "1" is selected in column 3
    sbs_column_toggle(3, 4, "1");
});
 

It works perfectly now! :) I can’t thank you enough

I have a similar request. Do y’all know how I make it so that ‘Cannot rate’ (column 9) is the only selection that can be made if ‘Not started’ (column 1) is selected?