How to disable html.button

Dash Python
1

I’m trying to alter a button’s status from enabled to disabled based on certain criteria in my app using this:

@app.callback(Output('my-button', 'disabled')....etc.

Button.react.js says that this is a valid target.

 /**
 * Indicates whether the user can interact with the element.
 */
'disabled': PropTypes.string,

My question is, what is the appropriate string to pass to disable the element? I’ve tried ‘True’, ‘true’, ‘False’, ‘false’, ‘enabled’, Enabled’, ‘disabled’, ‘Disabled’ but nothing seems to work.

I’m having difficulty locating where dash actually takes this information into consideration.

2

You will need a callback function that takes the button as output, and some other component’s condition/value as input. This function should return True or False a values, and not as a string.
You don’t need to pass anything to the disable parameter of the html.Button component (it’s optional). The callback function returns (determines) that value.

Here is an example, where the enabled/disabled status of the button is determined by another component (a dropdown menu in this case). Hope this solves it!

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output, Input

app = dash.Dash()


app.layout = html.Div([
    html.Button(id='button', children='Button'),
    html.Br(),
    dcc.Dropdown(id='dropdown',
                 options=[{'value': True, 'label': 'True'},
                          {'value': False, 'label': 'False'}])
])

@app.callback(Output('button', 'disabled'),
             [Input('dropdown', 'value')])
def set_button_enabled_state(on_off):
    return on_off


if __name__ == '__main__':
    app.run_server()
2 Likes
3

Awesome, thanks! Didn’t think of trying a boolean value because the propType said it was looking for a string.

1 Like
4

Hmm I realize that the initial disabled=True did not disable it during app startup. I had to hook up disable property to a signal at startup to be able to disable that.