Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Disable checklist options from rodeo button

Say I have a rodeo button like this:

              dcc.RadioItems(id='level',
                            options=[
                                {'label': 'Red', 'value': 'red_value'},
                                {'label': 'Blue', 'value': 'blue_value'},

And I have a checklist like this:

dcc.Checklist(id='exclude-checklist',
                                 options=[
                                     {'label': 'Label_A', 'value': 'value_a'},
                                     {'label': 'Label B', 'value': 'value_b'},
                                     {'label': 'Label_C', 'value': 'value_C'},
                                 ],

I want to make a condition that if Red is selected in the rodeo button then value_b and value_c are diabled.

Any advice?

Try this:

from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div(
    [
        dcc.Checklist(
            id="exclude-checklist",
            options=[
                {"label": "Label_A", "value": "value_a"},
                {"label": "Label_B", "value": "value_b"},
                {"label": "Label_C", "value": "value_c"},
            ],
            value=[],
        ),
        dcc.RadioItems(
            id="level",
            options=[
                {"label": "Red", "value": "red_value"},
                {"label": "Blue", "value": "blue_value"},
            ],
            value="blue_value",
        ),
    ]
)


@app.callback(
    Output("exclude-checklist", "options"), Input("level", "value"),
)
def update(radio):
    """
    If red is selected value_b and value_c are disabled.
    """
    if "red_value" in radio:
        return [
            {"label": "Label_A", "value": "value_a"},
            {"label": "Label_B", "value": "value_b", "disabled": True},
            {"label": "Label_C", "value": "value_c", "disabled": True},
        ]
    else:
        return [
            {"label": "Label_A", "value": "value_a"},
            {"label": "Label_B", "value": "value_b"},
            {"label": "Label_C", "value": "value_c"},
        ]


if __name__ == "__main__":
    app.run_server(debug=True)


Yes, thank you so much! This expedited my app by a lot.

1 Like