如何在 Dash 回调的“运行”参数中引用嵌套组件属性

Question

使用plotly-dash的“Running”参数时，有没有办法直接引用组件的嵌套属性？例如：

没有嵌套的直接引用（有效 - 但必须提供整个多部分属性）：

@app.callback(Output("graph1", "children"), Input("w1_radioSelect", "value"), 
              running=[
                          Output("checkbox_selector", "options"),
                          [{"label": "checkbox label", "value":"value", "disabled":True}, {...Remaining Options' Key-Value Pairs...}],
                          [{"label": "checkbox label", "value":"value", "disabled":True}, {...Remaining Options' Key-Value Pairs...}]
                      ]
              )

使用嵌套直接引用（不起作用 - 寻找某种类型的类似语法......？）

@app.callback(
                Output("graph1", "children"), Input("w1_radioSelect", "value"), 
                running=[Output("checkbox_selector", "options[0].disabled"),True, False]
             )

我尝试了上述的一些变体，但没有成功。

从示例中可以明显看出，这是专门参考 dcc.Checklist 项的。我认为没有任何其他方法可以禁用特定选项（除了将相应选项列表条目中的“禁用”键设置为 True 之外），但是如果我在该帐户上错了，请有人纠正我。另外，据我所知，整个清单没有可用的“禁用”参数。

其他参考：请参阅“回调运行时更新组件属性”部分

Answer 1

您可以使用客户端回调一次禁用所有复选框。下面是一个示例，当单选按钮更改时，嵌套在 id checkbox_selector 的 div 元素下的所有复选框都将被禁用。请注意，回调需要一个输出来满足 Dash。

# Disables all of the checkboxes
app.clientside_callback(
    """
    function(value) {
        const checkboxes = document.querySelectorAll('#checkbox_selector input[type="checkbox"]');
        checkboxes.forEach(checkbox => {
            checkbox.disabled = true;
        });
        return '';
    }
    """,
    Output(
        "dummy-output", "children"
    ),  # This is a dummy output since clientside_callback requires an output.
    Input("w1_radioSelect", "value"),
)

这是一个完整的工作示例：

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

app = Dash(__name__)

app.layout = html.Div(
    [
        html.H3("Radio Buttons"),
        dcc.RadioItems(
            id="w1_radioSelect",
            options=[
                {"label": "Option 1", "value": "1"},
                {"label": "Option 2", "value": "2"},
                {"label": "Option 3", "value": "3"},
            ],
            value="1",
        ),
        html.H3("Check Boxes"),
        html.Div(
            id="checkbox_selector",
            children=[
                dcc.Checklist(
                    id="checkbox1",
                    options=[{"label": "Checkbox 1", "value": "1"}],
                    value=[],
                ),
                dcc.Checklist(
                    id="checkbox2",
                    options=[{"label": "Checkbox 2", "value": "2"}],
                    value=[],
                ),
            ],
        ),
        html.Div(id="dummy-output"),
        html.Button("Reset", id="reset", style={"margin-top": "20px"}),
    ]
)

# Disables all of the checkboxes
app.clientside_callback(
    """
    function(value) {
        const checkboxes = document.querySelectorAll('#checkbox_selector input[type="checkbox"]');
        checkboxes.forEach(checkbox => {
            checkbox.disabled = true;
        });
        return '';
    }
    """,
    Output(
        "dummy-output", "children"
    ),  # This is a dummy output since clientside_callback requires an output.
    Input("w1_radioSelect", "value"),
)

# Enables all of the checkboxes
app.clientside_callback(
    """
    function(value) {
        const checkboxes = document.querySelectorAll('#checkbox_selector input[type="checkbox"]');
        checkboxes.forEach(checkbox => {
            checkbox.disabled = false;
        });
        return {};
    }
    """,
    Output("dummy-output", "style"),
    Input("reset", "n_clicks"),
)

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