JS link invert checkbox value

[njj67229]

Trying to use jslink to have a TextInput be disabled if a Checkbox is not selected.

file_pref_check = pn.widgets.Checkbox(name="filename-prefix", css_classes=["space-top"])
file_pref_text = pn.widgets.TextInput(placeholder="Prefix")
file_pref_row = pn.Row(file_pref_check, file_pref_text, width=225) 
file_pref_check.jslink(file_pref_text, value="disabled")

Not sure exactly how to have it call the inverse of the value of the checkbox. Sorry, this is a very simple question but the documentation examples don’t go too in depth over usage of a simple jslink() call’

[njj67229]

file_pref_check = pn.widgets.Checkbox(name="filename-prefix", css_classes=["space-top"])
file_pref_text = pn.widgets.TextInput(placeholder="Prefix")
file_text = pn.pane.Markdown("Test!")
file_pref_row = pn.Row(file_pref_check, file_pref_text, file_text, width=225) 

input_check_code='''
    target.disabled = !source.value
'''
text_check_code='''
    if(source.value)
        target.text = 'true'
    else
        target.text = 'false'
'''
file_pref_check.jslink(file_text, code={"value":text_check_code})
file_pref_check.jslink(file_pref_text, code={"value":input_check_code})

Tried it this way as well, but this only allows for the values to be updated once on a checkbox click

[Marc]

Hi @njj67229

Working Code

The below code works

import panel as pn

check = pn.widgets.Checkbox(name="filename-prefix")
text = pn.widgets.TextInput(placeholder="Prefix")

check.jscallback(
    value="""
text.disabled=(source.active.indexOf(0) >= 0)
""", args={"text": text}
)

pn.Row(check, text).servable()

The Challenge

The challenge when using jscallback and similar is that there is not always a 1-1 correspondance between the javascript bokeh model properties and the Python Panel parameters.

Here the bokeh model has the property active which in this case has the value [] (not checked) or [0] (checked). The reason is technical. It works when extending to a group of check buttons.

How I found the solution

I added console.log(source, text); to the js code and inspected the objects.

I also inspected the Panel source code of the Checkbox where I could see how the transformation between active and value was done.

Extra

I wish there was a 1-1 correspondence between the Python Panel parameters and the Bokeh JS properties. But there is currently not. This makes js linking harder than it should be.