Add N/A Option to Multi Image Select Question

The image selection question does not allow you to have an N/A Exclusive option. This tutorial will walk you through adding an exclusive option where no other images can be selected if the N/A option is selected. 

Check it out in a survey here: 

Check it out in an example survey!

OR

Add a survey with this setup to your account.

Features used in this example: 

• Multi Image Select Question
• JavaScript Action

Setup

After setting up your multi select image question with one image designated to be your "N/A" option click Action, select JavaScript, give it a name then click Save Action and Edit. Copy and paste the code below into the action:

jQuery(function($) {
    $(document).ready(function() {
        $(".sg-imageselect-item").click(function() {

            var find = 'N/A'; ///This must be changed in accordance with the title of the image you want to be exclusive
            var cur_clicked = $(this).find("img").attr("alt");
            var parent = $(this).parents('.sg-question-options');

            if ( cur_clicked.indexOf(find)!=-1 ) { // if they click 'None of these'

                // add class to hook the unique none of these button
                $(this).addClass("sg-none-of-these");

                // then uncheck and remove classes on all
                parent.find(".sg-imageselect-item").not($(".sg-none-of-these")).each(function() {

                    $(this).find("input").attr("checked", false);
                    //$(this).find("input").attr("disabled", "disabled");
                    $(this).removeClass("sg-image-selected");

                });


                $(this).addClass("sg-image-selected");
                $(this).find("input").attr("checked", true);
            }else {
                // Item which isn't 'None of these' was clicked
                // and
                // If 'None of these' is ticked then untick it and uncheck it
                parent.find("input[title='"+find+"']").attr("checked", false);
                parent.find("input[title='"+find+"']").parent().parent().parent().parent().removeClass("sg-image-selected");
                parent.find(".sg-none-of-these input").attr("checked", false);
                parent.find(".sg-none-of-these").removeClass("sg-image-selected");
            }        
        });

    }); // end ready

}); // end JQuery

After pasting the JavaScript, change the text in yellow to match the text of your image file.  This will be set up in the Question Builder. 

Test! Test! Test!

Now it's time to test out your survey. When the N/A option is selected, other options will not be able to be selected in conjunction with N/A.