We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Enabling/Disabling and changing values of ejs-switch, pragmatically in Jquery

I am developing Asp.Net Core MVC App. I am using ejs-switch for a bool ViewModel and i want to change it's value through JQuery on click of another ejs-swith control. Here is my code. Basically, i require the JQuery way to manipulate the controls because standard JQuery syntax won't work with syncfusion ej2 controls. 

<ejs-switch id="first" ejs-for="IsVendor" ></ejs-switch>
<ejs-switch id="second" ejs-for="IsCustomer" ></ejs-switch>
<ejs-switch id="third" ejs-for="IsLead" change="ToggleRoleTags"></ejs-switch>

<script type="text/javascript">
    function ToggleRoleTags(e) {
     //JQuery code here

on click on "third" control, i wanna enable/disable "first" control and check/un-check "second" control. I am using JQuery 3. Please help 

1 Reply

VK Vinoth Kumar Sundara Moorthy Syncfusion Team May 31, 2019 10:04 AM UTC

Hi Saud, 
Thank you for contacting Syncfusion support. 
We have checked your reported requirement “To check/uncheck and enable/disabe the switch in change event”. And we would like to let you know that our Essential Javscript 2 controls are pure javascript components, so no need to use jquery to achieve your requirement. However, your requirement can be achievable using checked and disabled property by getting the switch instance as like in the below code example, 
Code Example: 
    <ejs-switch id="first" ejs-for="IsVendor"></ejs-switch> 
    <ejs-switch id="second" ejs-for="IsCustomer"></ejs-switch> 
    <ejs-switch id="third" ejs-for="IsLead" change="ToggleRoleTags"></ejs-switch> 
function ToggleRoleTags(e) { 
var firstInstance = ej.base.getComponent(document.querySelector("#first"), 'switch'), 
secondInstance = ej.base.getComponent(document.querySelector("#second"), 'switch'); 
secondInstance.checked = !secondInstance.checked; // check/uncheck according to your need 
firstInstance.disabled = !firstInstance.disabled;  // / enable/disable according to your need 
For your convenience, we have prepared the sample based and the same can be found in the below link, 
Could you please check the above sample and get back to us, if you need any further assistance on this? 
Vinoth Kumar S 

Live Chat Icon For mobile
Up arrow icon