Search results

Set disabled state in JavaScript Switch control

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

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

Source
Preview
app.ts
index.html
import { Switch } from '@syncfusion/ej2-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Initialize Switch component with disabled support.
let switchObj: Switch = new Switch({ disabled: true });

// Render initialized Switch.
switchObj.appendTo('#element');
<!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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <input type='checkbox' id='element'/>
    </div>
</body>

</html>