Programmatically disabling options in checkboxGroup

App Building
1

Hi There,

Been struggling for a bit with programmatically disabling options within a checkboxGroup. I checked out this somewhat related thread but don't think it quite addresses what I'm hoping to do.

Essentially I am sending users through a user flow twice (in two connected apps, with the relevant data stored in localStorage) where they can answer with progressively narrow options. I would like to disable the options that they did not select in the first checkboxGroup. I have simple code set up in a query to create a boolean array for whether that particular option should be disabled.

const firstSelection = localStorage.values.Size;

const allOptions = ["<5", "5-49", "50-249", "250+"];

// Map through the defaultOptions to check whether each is NOT in passthroughVars
const constructedBoolArray = allOptions.map(option => !firstSelection.includes(option));

return constructedBoolArray;

However, there do not seem to be any methods to set individual options to disabled - seemingly just the entire checkboxGroup through setDisable().

I've tried doing this directly within each option's "Disabled" option, but I can't find any information on how I could passthrough the individual option's value as an additional scope to programmatically set it to disabled or not.

Hoping someone can provide some advice or feedback on what I might be doing wrong here (or letting me know if this is impossible currently within Retool).

Thanks!

2

Hi there @Chris_Doty,

I remember trying to do this in the past and facing the exact same issues you are facing. I eventually gave up and ended up using a repeatable listView component with a checkbox + text, as it is much easier to select your data source (i.e. the query you are referring) and then mark whether each checkbox is true or false (and disabling them as well) depending on whatever condition you specifiy. Does that make sense or am I completely misunderstand what you're trying to achieve?

1 Like
3

If the checkbox is using the mapped values from your query then it should be possible to disable/enable individual items programmatically.

e.g. something like this

image
image1574×523 41.3 KB

Passing in an array of options with a disabled property could work?

1 Like
4

@dcartlidge - this seemed like a fantastic idea, but I'm not able to get this to work for some reason - not sure if it's specifically related to the checkboxGroup component type or what.

Essentially I implemented the mapped variables -

[
  {label: 'Less than 5', value: '<5', disabled: false},
  {label: '5-49', value: '5-49', disabled: false},
  {label: '50-249', value: '50-249', disabled: false},
  {label: '250+', value: '250+', disabled: false}

]

And then I am programmatically attempting to set the disabled values via a query that runs on page load.

const firstSelection= localStorage.values.Size;

const allOptions = ["<5", "5-49", "50-249", "250+"];

// Map through the allOPtions to check whether each is NOT in passthroughVars
const constructedBoolArray = defaultOptions.map(option => !passthroughVars.includes(option));

// Create a new array with the updated 'disabled' properties
const newCheckBoxGroupData = checkBoxGroupData.value.map((item, index) => {
  return { ...item, disabled: constructedBoolArray[index] };
});

//Assign back to the mapped array that is used in the actual component
checkBoxGroupData.value = newCheckBoxGroupData;

return checkBoxGroupData.value;

I went ahead and added a return just to check my work here, though I would not assume one is strictly necessary (I've also gone through and added console.log() statements throughout and everything seems to progress correctly). The output of checkBoxGroupData.value is reading correctly - as in with the disabled values set correctly... but nothing changes within my actual checkboxGroup in terms of disabling options. And the state of the variable itself when I inspect it never changes.

My mapping is simple so I don't feel this is the issue:

image
image396×585 25 KB

I have at various points in trying to workaround this problem hit issues where I've been told that my checkBoxGroupData is a constant, which really surprised me.

FWIW, I'm a relative novice, so I may be entirely misunderstanding something here though.

5

Managed to solve this, perhaps not the best way to do it, but I went back to previous code where I had variables I had been updating in a similar way (though not checkboxGroups).

I'm not sure what specifically in this fixed it because I changed two major things here - wrapping everything in a function which is called by my JS Query, and also creating a shallow copy prior to doing the assignment within the function. This also allowed me to use the setValue function, which was previously throwing errors at me when I tried to use it in other places.

Anywho - for anyone that might come across this in the future here's how I ended up solving (with major credit to @dcartlidge for the mapping option to get me on the right track).

function updateCheckBoxGroupData(newValues) {
  // Clone the current state to create a shallow copy of the array
  var checkBoxGroupCopy = checkBoxGroupData.value.slice();

  // Apply the new 'disabled' values from newValues to the checkBoxGroupCopy
  checkBoxGroupCopy.forEach((item, index) => {
    item.disabled = newValues[index];
  });

  // Update the checkBoxGroupData with the modified array using setValue
  checkBoxGroupData.setValue(checkBoxGroupCopy);
}

// Construct the array of 'disabled' values similar to before
const passthroughVars = localStorage.values.Size;
const allOptions = ["<5", "5-49", "50-249", "250+"];
const constructedBoolArray = allOptions.map(option => !passthroughVars.includes(option));

updateCheckBoxGroupData(constructedBoolArray);