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

Dash
#1

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

#2

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)
#3

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?

#4

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)
#5

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.

#6

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