Conditional hide/show some checkbox options

Hi there,
I searched and read this thread: Multiple Checkbox disable some options
and this: Hiding Option is Multi Select
but I still can't make it right :frowning:
I have a choice field Tasks (multiple checkboxes) and another choice field Nomination Type (dropdown): I need to hide some choices in Tasks based on the Nomination Type selected:

fd.spRendered(() => {
function reqattachments() {
var optionToHide = $(fd.field('Tasks').$el).find('.row')[4];
var optionToHide2 = $(fd.field('Tasks').$el).find('.row')[2,3,4];

    if (fd.field('NominationType').value == 'New Business Sourcing') {
        $('.nbs').show();
    } else {
        $('.nbs').hide();
    }
    if (fd.field('NominationType').value == 'Directed Buy') {
        $(optionToHide).css("display", "none");
        $('.db').show();
    } else {
        $('.db').hide();
    }
    if (fd.field('NominationType').value == 'Off-the-Shelf') {
        $('.offs').show();
        $(optionToHide).css("display", "none");
    } else {
        $('.offs').hide();
    }
    if (fd.field('NominationType').value == 'Uplift') {
        $('.up').show();
        $(optionToHide2).css("display", "none");
    } else {
        $('.up').hide();
    }        
    
}

fd.field('NominationType').$on('change',reqattachments);

reqattachments();

it hides optionToHide but only on Save , doesn't change if the field changes, and optionToHide2 - does not work at all.

I am definitely missing something here... Can you please help?
Thank you in advance!

Hi @katy,

Could you share some screenshots of your browser's console (F12)? If optionToHide2 doesn't work, the console should have useful errors.

Here's the console screen when Uplift (for option 2) is chosen.

Hi @katy,

It seems like getting a list of all checkbox options on the form and hiding some of them based on their names would be much easier. Could you try this approach?

fd.spRendered(() => {
    hideOrShowOptions(["Choice 1", "Choice 3"]); // calling the function to hide "Choice 1" and "Choice 3"
    hideOrShowOptions(["Choice 3"], false); // calling the function to show "Choice 3" back
});

// This function accepts two arguments: an array of option names and a boolean flag that defines if the options from the array will be hidden or shown
// The modified options don't have to be from the same field
function hideOrShowOptions(optionsToHide, hide = true) {
    var options = $('li.k-item');
    
    for (let i = 0; i < options.length; i++) {
        if (optionsToHide.includes($(options[i]).text())) {
            if (hide) $(options[i]).hide();
            else $(options[i]).show();
        }
    }
}

Hi @IliaLazarevskii , sorry but I don't understand how to apply it to my situation. Where do I specify the Nomination type? I understand that I need to replace "Choice 1" with the actual Task text, correct?

Hi @katy,

When using this approach, you don't have to specify Nomination type, since the statement

$('li.k-item');

returns an array of all checkboxes on the form. The function then hides or shows all checkboxes with names present in the optionsToHide array. Let me know if this works for you.