Link Checkbox to Drop-down

Linking a checkbox to a drop-down is requires the application of element id’s as well as event attributes and some custom code. It is not complex in it’s creation or implementation.

The first step when linking a checkbox to a drop-down is to apply an id to the checkbox. Click on the desired checkbox, then in the Options Table add the attribute id with a value of your choice. In this example the id will be “linkedBox” (no quotes).

Next up is creating the function which will “link” a specific drop-down value, or multiple values to the desired checkbox. This example will cover how to cause the checkbox to become checked when one, or one of multiple specific values are selected in the drop-down.

First, enter your preferred coding environment or text editor. (ex: https://jsfiddle.net/). Next, copy the following line of code, then replace the selector “linkedBox” with the id you previously gave to the desired checkbox.

Lastly, change “DESIRED MATCHING VALUE” to the value of the drop-down which you want to trigger the checkbox with. (Make sure to surround the value in quotes like done above)

If there are multiple possible values which you would like to trigger the checkbox with, the function becomes a little more complicated. An array of all possible values will need to be created, and the function must search that array to see if the drop-down matches a possible value. In the code below, the constant “possibleOptions” is what defines the array. Replace all of the values within the square brackets with the desired possible values, surrounding each value in quotes and separating each value with a comma. Again, you would replace “linkedBox” with the correct checkbox id.

Lastly, in order to have this code do anything, it must be applied to the form. On the onchange attribute of the drop-down, add your custom code.

The functionality should now be deployed.

1. If the checkbox being set is on a dynamic tab, then that tab must be loading prior to trying to toggle it. If the checkbox has not been initialized, then the drop-down will not be able to set its value. The workaround for this is to have a hidden checkbox off to the side of the tabset which work as a sort of proxy checkbox. The proxy checkbox will store the value (either checked or not) based on the dropdown, then the non-proxy checkbox will mirror the condition of it.

There will need to be a function on the proxy checkbox’s onchange attribute which will set the value of the non-proxy checkbox. It would look similar to this:

Replacing “nonProxyCheckbox” with the id given to the non-proxy checkbox.

The non-proxy checkbox has to be initialized before the previous code will work, and therefore there must be functionality for it to be in the correct state upon itialization. This can be achieved through the use of shadowId. On the non-proxy checkbox, apply the attribute shadowId with the value being the elementId of the proxy checkbox. Also give the non-proxy checkbox the class “unhook” (no quotes). This will prevent the non-proxy checkbox from updating the form when the tab it resides on is entered and it’s condition is changed to match the proxy.

This process will make it so that the proxy checkbox is what actually stores the information, while the non-proxy checkbox is simply a visual. If the non-proxy checkbox does not have disabled set to “true” (no quotes), then the following code will also be necessary on its onchange attribute so as to update the proxy checkbox to the correct value:

Replacing “proxyCheckbox” with the id given to the proxy checkbox.

Any search, reporting, or other form functions will have to be set up to work with the proxy checkbox instead of the non-proxy checkbox.

2. If the non-proxy checkbox (or just the checkbox if the proxy is not set up) is not disabled (disabled set to “true”), it may lead to confusion if the condition of the checkbox is changed causing it to be different from what would be expected based on the value in the drop-down. This is why it is recommended to have the checkbox in question disabled.