Radio button trigger check boxes

How do I disable Selection Location Type checkboxes till the user selects one of the radio buttons?radio-btns.rp (44.4 KB)

Hi there,

First you must right click on the checkboxes and click in Disabled (you can style the elements to look a little more like a disable state.
Then, you must create an interaction to enable the checkbox, by clicking on each radio button and adding a Selected interaction.radio-btns-adjusted.rp (45.5 KB)

I’ve adjusted your example. Take a look at the interactions as it will help you understand the mechanics…

Regards,

There are several ways you can do this, depending on your preferences. The first step is to make the checkboxes disabled by default, the second step is to enable the checkboxes when a radio button is clicked or selected.

I demonstrate a few of these in this updated .rp file:
radio-btns.rp (54.3 KB)

  • First, to make any widget disabled by default, select it and set its default selection state to "Disabled. In your example,
  1. Select the two checkbox widgets (drag over them or Shift-Click them …or you can do each widget individually.)
  2. Right-Click the widget(s) and select “Disabled” from the context menu. Or, click the “3-dot menu” in the INTERACTIONS pane, then
  3. Select the “Disabled” checkbox.

If you have defined a :disabled style effect for your widget(s) this will display in the editor as well as browser at initial page load.

  • Or, you can use the widget’s Loaded interadction event to set an action of “Disable This” so that when it gets loaded it will disable itself.
  • Or, you can similarly use the Page Loaded event to disable one or more widgets.

The latter two methods won’t show the disabled state in the editor (unless you select the widget and inspect its style effects) but it may be easier to see that it is disabled by default when looking at the interaction code. Just a preference/context thing–your choice. All 3 methods have same result in the browser.

  • Second, add an interaction event to your radio buttons, either the Click or Tap or Selected event, that has an action of “Enable <widget/s>”. For radio buttons either event will have the same result, but Selected is a little more extensible.

In Page 1 of the attached .rp file I’ve applied a solution so you can inspect how this was done.

Not sure why you’ve got two different :disabled styles for each of the checkboxes, but maybe just playing around with things? Also, neither style looks different enough to me to be obviously disabled, but maybe that’s just me… You also have a lighter gray font color for the “Select Location Type…” and checkbox text, so I’m thinking your intention is to initially show that whole set/line/group as disabled until one of the radio buttons is clicked/selected.

I also notice the two checkboxes behave differently–and I’m not sure why…it seems to be because the first has a :focused style effect, but this shouldn’t affect its behavior. At any rate, clicking it once seems to do nothing, then clicking it a second time briefly shows the checkmark then shows the focused style, which seems like a bug*.

I duplicated your page to Page2 and created a new “Custom Disabled” style (which just sets widget opacity to 33%) so I could clearly see what was going on with the checkboxes. I removed the :focused style effect and it seems to have “fixed” the checkbox behavior. I also created a “widget group” for the checkboxes and their “title” by selecting all three widgets and Ctrl-G (or right-click and select “Group”.) I named the group, “checkboxGroup”. Each of the three widgets in this group have a :disabled style effect of “Custom Disabled” and then I set the default style of “checkboxGroup” to Disabled. Each radio button has a Selected event with an action to “Enable checkboxGroup” --so this is kind of an extension of the first method I outlined above. (Oh, and I also removed the separate Label widgets next to your Radio Button widgets and pasted their text onto the Radio Buttons. This makes things simpler and provides better usability. Now in RP9 these type of widgets can be styled to provide things like padding, colors, etc.)


*Bug?: On Page 1 if you click the left checkbox once, nothing happens… but if you then click the right checkbox once, both show as selected. The only thing I can figure out is the left checkbox does get selected when clicked but it is not shown due to the :focused style–in other words, the “selected and focused” effect looks like an unchecked checkbox, but when it loses focus the checkmark is shown. Confusing!

1 Like