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

Make on checkbox inactive if another is selected

How can you grey out a checkbox conditional on another checkbox being selected in dcc.Checklist?

Hi @ngpsu22

If you want the user to be able to select only one checkbox at a time, you could use dcc.RadioItems.

However if you want something like if box 1 or 2 is selected then box 3 and 4 are disabled, you can update the options in a callback. Here is an example:


import dash
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="my_checklist", value=[]))

@app.callback(Output("my_checklist", "options"), Input("my_checklist", "value"))
def update(checklist):
    if ("Item_A" in checklist) or ("Item_B" in checklist):
        return [{"label": i, "value": i} for i in ["Item_A", "Item_B"]] + [
            {"label": i, "value": i, "disabled": True} for i in ["Item_C", "Item_D"]
        ]
    else:
        return [{"label": i, "value": i} for i in ["Item_A", "Item_B", "Item_C", "Item_D"]]
        

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

Thanks Ann. I’m still a little confused and can’t get it to work on my end.

Say I have:

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

If C is selected B should be disabled. If B is selected C should be disabled. A should always be enabled. Any suggestions?

Hi @ngpsu22

Sure! :cake: :slight_smile:

Try this:

import dash
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",        
        value=[],
    )
)


@app.callback(
    Output("exclude-checklist", "options"), Input("exclude-checklist", "value"),
)
def update(checklist):
    """
    If C is selected B should be disabled. If B is selected C should be disabled. A should always be enabled.
    """
    if "value_c" in checklist:
        return [
            {"label": "Label_A", "value": "value_a"},
            {"label": "Label_B", "value": "value_b", "disabled": True},
            {"label": "Label_C", "value": "value_c"},
        ]
    elif "value_b" in checklist:
        return [
            {"label": "Label_A", "value": "value_a"},
            {"label": "Label_B", "value": "value_b",},
            {"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)


Great, thank you so much. One more question. Is there a way to disable options in other checklists if something is selected from another dcc function–say a radio button.

For example, what would it look like to have the same scenario as above but instead it was a radio button as the input.

Like f Rodeo button = Brown then disable value_b and value_c in the checklist?

Again, I really appreciate the help.

Sorry, I don’t understand your question, can you clarify?