Make on checkbox inactive if another is selected

Dash Python
#1

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

1 Like
#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)
1 Like
#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?

#7

How have this functionality, having a checkbox inactive when another is active, when each box in the checklist consist of elements that need an uniqe id.

So instead of:

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

we have:

dcc.Checklist([Label_A], id=“a_id”)
dcc.Checklist([Label_B], id=“b_id”)
dcc.Checklist([Label_C], id=“c_id”)
dcc.Checklist([Label_D], id=“d_id”)

#8

Hi @hilde1

The solution is quite similar. You would need to use a dictionary to update the options rather than use the shortcut [Label_A] because you need to set the disabled prop in the options dict.

For simplicity, let’s keep the problem the same as the scenario described earlier – If C is selected B should be disabled. If B is selected C should be disabled. A should always be enabled.

from dash import Dash, dcc, html, Input, Output, ctx

app = Dash(__name__)

app.layout = html.Div(
    [
        dcc.Checklist(["Label_A"], id="a_id"),
        dcc.Checklist(id="b_id"),
        dcc.Checklist(id="c_id"),
    ]
)


@app.callback(
    Output("b_id", "options"),
    Output("c_id", "options"),
    Input("b_id", "value"),
    Input("c_id", "value"),
)
def update(b, c):
    """
    If C is selected B should be disabled. If B is selected C should be disabled. A should always be enabled.
    """
    if b == ["Label_B"]:
        return (
            [{"label": "Label_B", "value": "Label_B"}],
            [{"label": "Label_C", "value": "Label_C", "disabled": True}],
        )
    if c == ["Label_C"]:
        return (
            [{"label": "Label_B", "value": "Label_B", "disabled": True}],
            [{"label": "Label_C", "value": "Label_C"}],
        )
    return (
        [{"label": "Label_B", "value": "Label_B"}],
        [{"label": "Label_C", "value": "Label_C"}],
    )


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