I’ve created a list view in Retool that displays a list of articles based on a database query. When an article is selected, an event listener populates a variable with the article data and displays it in a tabbed container. The interface allows for viewing up to two articles at a time.
I want to disable the remaining checkboxes once two articles have been selected. However, when I attempt to use querySelectorAll to select the input elements of type checkbox, it returns an empty array, even though the checkboxes are present and visible in the UI.
Is there a specific method or approach for using querySelectorAll to select input checkboxes in Retool? Below is the JavaScript code I’m using, which runs as part of an event listener triggered when a checkbox is set to true. I have tried to use queryselector on a single element with a ID and get the same result as well. My goal is to disable checkboxes that are not selected.
function displayArticle(article) {
if (article1.value.title === '') {
article1.setValue(article);
} else if (article2.value.title === '') {
article2.setValue(article);
} else {
const test = document.querySelectorAll('input[type="checkbox"]');
console.log(test);
}
}
displayArticle(item);
Have you tried console.logging before your querySelectorAll to ensure you're getting to the else clause? I think you'd want to select them all once article2 has a value, therefore run it in the else if block.
Also, what component are you using for your checkboxes inside the listView?
Hey @MikeCB
The test console log does end up running in the else block. However you are right I should add the querySelectorAll once the second article has been selected. However the querySelector Still comes up null for some reason.
As for the component I am using, I am using the checkbox input.
So Retool executes its code in a sandbox, where the code does not have access to the document object or any of its methods such as .querySelectorAll()
If you had a custom component where you were defining HTML then it might work but that would be a lot of overhead for rebuilding the components
As a work around, you could have a variable counter for the number of selected checkboxes.
On all the components, you can set them to disabled when the counter is === 2.
Then do addition and subtraction to this variable when a click action is triggered, based on if the components state is checked or not checked at the time of the click event.
