Search code examples
aureliadisable

Disable Tabs on selection of specific radio button

I have Total 6 Tabs .Every Tab has it own content.On Tab 6 there are two radio box

1- Automatic ( Radio Button) Under this Radio box there are 5 Checkbox in which Tabs names are mention on each checkbox.

2- Manual

Now I want that If I Select " Automatic" Option then All Tabs should disable and All check boxes should select under radio button .

and If I select Option 2 "Manual" Then all Tabs should be enable .

Solution

  • Here is an example of what you want https://codesandbox.io/s/88vv14qwwj

    I used: - Bootstrap tab for ease of styling - 3 tabs for less noise

    What it boils down to is the logic of setting disabled on your tab buttons, and how to create <input type=radio> in your last tab. You just need to make sure they have the right combo to disable only what you need.

    In the example, I did: disabled.bind="isAutomatic && !tab.disabled"

    It means only disable the tab buttons when it's automatic mode and the tab checkbox in the last tab panel has not been checked, as the checkboxes in the last panel are bound to tab.disabled in your app tabs array.