title: Asp.net MVC check/uncheck the checkbox based on a value?
body: <p>I am working on asp.net MVC 5, i have added a <code>bootstrap toggle switch</code> of type <code>checkbox</code> in <code>input</code> field like bellow </p>
  
  <pre><code> &lt;input id="test_id" name="cmdName" type="checkbox" checked data-toggle="toggle"&gt;
  </code></pre>
  
  <p>I want to do Check/Uncheck the checkbox based on <strong>On</strong> or <strong>Off</strong> value </p>
  
  <p><strong>Note:</strong> By default it's always on</p>
  
  <p>I want to do something like this in my Javascript</p>
  
  <pre><code>If(command == "On")
  {
    //then it will check the checkbox
  }
  else if (command =="Off")
  {
    //then it will uncheck the checkbox     
  }
  </code></pre>
  
  <p>I have found many similar questions related to it and I tried to implement it but all in vain</p>
  
  <p>The links are bellow </p>
  
  <ol>
  <li><a href="https://stackoverflow.com/a/17420580/6856823">Link 1</a></li>
  <li><a href="https://learn.jquery.com/using-jquery-core/faq/how-do-i-check-uncheck-a-checkbox-input-or-radio-button/" rel="nofollow noreferrer">Link 2</a></li>
  <li><a href="http://www.webknowledgefree.com/check-uncheck-checkbox-using-jquery/" rel="nofollow noreferrer">Link 3</a></li>
  <li><a href="https://stackoverflow.com/a/8328125/6856823">Link 4</a></li>
  </ol>
  
  <p>Also i have tried to add <code>$('input:checkbox[name=cmdName]').attr('checked', false);</code> including <code>setAttribute</code> , <code>removeAttribute</code> , <code>.prop</code> and many others, but couldn't accomplished the task and i don't know what is the problem </p>
  
  <p>I am using <code>jquery 3.1.0</code> and bellow are my references</p>
  
  <pre><code>&lt;head&gt;
  &lt;title&gt;@ViewBag.Title&lt;/title&gt;
  @*All the javascript and css files that are required by the
      application can be referenced here so that there is no
      need to refrence them in each and every view*@
  
  
  &lt;script type="text/javascript" src="~/Scripts/jquery-3.1.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/bootstrap-toggle.js"&gt;&lt;/script&gt;
  &lt;link href="~/Content/bootstrap-toggle.css" rel="stylesheet" /&gt;
  &lt;link href="~/Content/bootstrap.css" rel="stylesheet" /&gt;
  &lt;link href="~/Content/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" /&gt;
  &lt;script type="text/javascript" src="~/Scripts/DataTables/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="~/Scripts/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://maps.google.com/maps/api/js?key=MyKey"&gt;&lt;/script&gt;
  
  
  &lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /&gt;
  &lt;link rel="icon" href="favicon.ico" type="image/ico" /&gt;
  &lt;link rel="shortcut icon" href="~/favicon.ico" /&gt;&lt;/head&gt;
  </code></pre>
  
  <p>Any help would be appreciated </p>