How to modify button attribute with Pyscritp #1206
-
|
Hello. I would like to know how a button can be enabled or disabled using pyscript. The code would look something like this, but using ·setAttribute" doesn't work. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 8 replies
-
|
Hello @joseludenia you need to do def enabled():
button = Element("but").element.setAttribute("disabled", True) |
Beta Was this translation helpful? Give feedback.
-
|
Yes, that works, but when I try to activate a disabled button, like this, it doesn't work. Thank you so much. button1 |
Beta Was this translation helpful? Give feedback.
-
|
Right that's because if a button is disabled event clicks won't register. A workaround that is adding the button inside a div and if the button is disabled, clicking the div would set the button attribute to false. Do you need help with an example code? I'm on the phone at the moment 😄 |
Beta Was this translation helpful? Give feedback.
-
|
Also are you disabling the button for style purposes? If so it might be worth trying to add/removing a specific class in the button that could mimics the disabled appearance. |
Beta Was this translation helpful? Give feedback.
-
|
Hello Fabio. |
Beta Was this translation helpful? Give feedback.
-
|
You can insert code in two ways. Either by pressing the < > icon on the top right bar:
You can also use triple backticks (`) if you can also specify the language by doing three backticks followed by the language such as Python. |
Beta Was this translation helpful? Give feedback.
-
|
Here's a full working code that you can use: <!DOCTYPE html>
<html lang="en">
<head>
<title>Enable Disable Buttons</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://pyscript.net/releases/2022.12.1/pyscript.css" />
<script defer src="https://pyscript.net/releases/2022.12.1/pyscript.js"></script>
</head>
<body>
<button id="button-1" py-click="toggle1()">Button 1</button>
<button id="button-2" py-click="toggle2()">Button 2</button>
<py-script >
def toggle1():
button1 = Element("button-1").element
button2 = Element("button-2").element
if button2.disabled:
button2.removeAttribute("disabled")
button1.setAttribute("disabled", True)
def toggle2():
button1 = Element("button-1").element
button2 = Element("button-2").element
if button1.disabled:
button1.removeAttribute("disabled")
button2.setAttribute("disabled", True)
</py-script>
</body>
</html>The code is a bit rough, but should give you an idea of how to do what you wish. Also in py-script you can either write your python code between
This is useful if you want to use any help from your IDE (VsCode for example) such as code highlighting and autocompletion. Hope this helps 😄 |
Beta Was this translation helpful? Give feedback.
-
|
Yes!! It works!! Thank you so much. |
Beta Was this translation helpful? Give feedback.
-
|
These are DOM attributes specific for an element, that's why we are doing |
Beta Was this translation helpful? Give feedback.
Here's a full working code that you can use: