Search results

Set disabled state in JavaScript (ES5) Toggle Switch Button control

20 Apr 2021 / 1 minute to read

Switch can be disabled by setting the disabled property to true.

The following example illustrates how to disable support in Switch component.

Source
Preview
index.js
index.html
Copied to clipboard
ej.base.enableRipple(true);

// Initialize Switch component with disabled.
var switchObj = new ej.buttons.Switch({ disabled: true });

// Render initialized Switch.
switchObj.appendTo('#element');
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Switch</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/fabric.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <input type="checkbox" id="element">
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>