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!
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?