toggleButton - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: disable, enable, jqxToggleButton, toggle button

This topic contains 4 replies, has 2 voices, and was last updated by slothy 11 years, 9 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

toggleButton Posts
February 15, 2013 at 7:49 pm toggleButton #15321

slothy
Member

Hi Guys,

how do i disable and re-enable a jqxToggleButton programmatically?

I want to disable a ToggleButton if a user sets a radio button to a certain value and then re-enable it say .

I know it can be done at instantiation but cant seem to do it after 🙁

So for example

$(“#myButton”).jqxToggleButton({ toggled: true, theme: theme});

// i want to disable?

Thanks in advance.

Alex

February 18, 2013 at 12:35 pm toggleButton #15411
Dimitar
Participant
Hello Alex,

Here is an example:
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title id='Description'>The jqxToggleButton represents a button widget that switches
        its checked state after a click.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // Create a jqxToggleButton widget.
            $("#jqxButton").jqxToggleButton({ width: '200', toggled: true, theme: theme });
            $("#enable").click(function () {
                $("#jqxButton").jqxToggleButton({ disabled: false });
            });
            $("#disable").click(function () {
                $("#jqxButton").jqxToggleButton({ disabled: true });
            });
        });
    </script>
</head>
<body>
    <input style='margin-left: 25px;' type="button" value="Toggle Button" id='jqxButton' /><br />
    <button id="enable">
        Enable toggle button</button>
    <button id="disable">
        Disable toggle button</button>
</body>
</html>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
February 18, 2013 at 9:05 pm toggleButton #15428

slothy
Member

Thanks very much Dimitar 🙂

just a few points however.

1) It seems that there is no accompanying CSS markup to tell that user that the toggle button is now disabled (although clicking it has no effect) when the button is disabled programatically?

Is that what was intended?

It seems inconsistent to have a different CSS for buttons disabled at initialisation and those disabled after. i.e. from what i see, disabling a button if toggle is true keeps it toggled true…..

(i had a work around and just added the disabled CSS to the button to emulate that of the disabled at initialisation if user disabled programatically)

2) the disabled method/property for toggle button seems absent from the documentation (for the toggle button that is but it is for button but one can assume inherited) 🙂

I assumed this was the case. I just, perhaps WRONGLY assumed that the toggle button would take the same CSS markup if disabled programatically as when it was disabled at initialisation.

Regards Alex.

February 19, 2013 at 10:42 am toggleButton #15469

Dimitar
Participant

Hi Alex,

Thank you for your feedback. We will have your suggestions in mind for improvement.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

February 20, 2013 at 12:17 pm toggleButton #15533

slothy
Member

Thumbs up, dimitar 🙂

No problem. My pleasure. Keep up the good work.

Regards Alex.
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.