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
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];
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?
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.
@IliaLazarevskii still cannot make it work - i think the issue is the condition, here are my fields:
I want if the Nomimation type is changed to Direct Buy -> hide last two options, but you are saying I don't need to specify Nomination type, then how does the condition even know when to hide something?
You don't need to specify Nomination type inside the function since it only accepts a list of options. Instead, the condition should be evaluated every time Nomination type is changed:
fd.spRendered(() => {
fd.field('NominationType').$on('change', () => {
if (fd.field('NominationType').value == 'Direct Buy') hideOrShowOptions(['Add to Currency Monitor', 'Tech Review']);
});
});
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();
}
}
}
fd.spRendered(() => {
fd.field('NominationType').$on('change', () => {
if (fd.field('NominationType').value == 'Direct Buy') hideOrShowOptions(['Add to Currency Monitor', 'Tech Review']);
// edit the code inside this function to show or hide options on the form. You can call hideOrShowOptions() like any other function:
//
// 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" */
//
// the first parameter is a list of options to hide/show, and the second parameter can either be empty (to hide the options from the list) or false (to show them)
});
});
You shouldn't have to change the hideOrShowOptions() function, just paste it into the editor as it is.
@IliaLazarevskii sorry Ilia, this still doesn't work. I moved on and redesigned it to make it not a dropdown field, but several text controls, this works for me.
