Select all checkboxes in a list view with query selector

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);

Hi @matt.em,

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.

Hello @matt.em!

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() :sweat_smile:

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 :smiling_face_with_tear:

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.

Let me know if this works for you!