如何禁用dash-mantine-components（dmc）中CheckboxGroup内的复选框？

要实现CheckboxGroup选一个选项后禁用其余选项的效果，可通过Dash回调监听选项变化，动态更新每个Checkbox的disabled和checked属性来完成。以下是完善后的可行方案：

完整代码示例 #

import dash
from dash import Input, Output
import dash_mantine_components as dmc

app = dash.Dash(__name__)

app.layout = dmc.MantineProvider(
    children=[
        dmc.CheckboxGroup(
            id="checkbox-group",
            orientation="horizontal",
            offset="md",
            mb=10,
            children=[
                dmc.Checkbox(label="LABEL_A", value="lbl_a"),
                dmc.Checkbox(label="LABEL_B", value="lbl_b"),
                dmc.Checkbox(label="LABEL_C", value="lbl_c"),
            ],
        )
    ]
)

@app.callback(
    Output("checkbox-group", "children"), 
    Input("checkbox-group", "value"),
    prevent_initial_call=False
)
def update_checkboxes(selected_values):
    # 处理初始未选中任何选项的状态
    if not selected_values:
        return [
            dmc.Checkbox(label="LABEL_A", value="lbl_a"),
            dmc.Checkbox(label="LABEL_B", value="lbl_b"),
            dmc.Checkbox(label="LABEL_C", value="lbl_c"),
        ]
    
    # 有选项被选中时，禁用其余未选中选项
    return [
        dmc.Checkbox(
            label="LABEL_A", 
            value="lbl_a", 
            checked="lbl_a" in selected_values,
            disabled=len(selected_values) > 0 and "lbl_a" not in selected_values
        ),
        dmc.Checkbox(
            label="LABEL_B", 
            value="lbl_b", 
            checked="lbl_b" in selected_values,
            disabled=len(selected_values) > 0 and "lbl_b" not in selected_values
        ),
        dmc.Checkbox(
            label="LABEL_C", 
            value="lbl_c", 
            checked="lbl_c" in selected_values,
            disabled=len(selected_values) > 0 and "lbl_c" not in selected_values
        ),
    ]

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

关键逻辑说明 #

• 回调监听checkbox-group的value属性，实时获取当前选中的选项列表
• 初始状态下，所有Checkbox保持可选中状态
• 当有任意选项被选中时：
  • 已选中的Checkbox保持checked=True且可交互（不禁用）
  • 未选中的Checkbox设置disabled=True，阻止用户继续选择
• 通过prevent_initial_call=False确保页面加载时回调正常执行，初始化组件状态

内容的提问来源于stack exchange，提问作者dark.vador