title: CheckBox To Behave Like Toggle Switches
body: <p>I've an ASP.NET application where it has a list of products in a page with related details and with status column (Bit field - CheckBox). It works perfectly and I can change the status from true to false or vice-versa using Ajax. While doing so, I am keeping the state of the CheckBox means if it's true, then it remains checked, otherwise unchecked. See the image below except the red highlighted (One more thing - True means active and false means inactive product in this scenario):</p>
  
  <p><a href="https://i.stack.imgur.com/5wyqH.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5wyqH.jpg" alt="Sample Image"></a></p>
  
  <p>Now what I am trying is to make the CheckBoxes into toggle switch as well to keep the changes of the CheckBoxes something like this - <a href="http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch" rel="nofollow noreferrer">BootStrap Toggle Switches</a></p>
  
  <p>I am not sure how to do it and tried to follow this to make the CheckBoxes work as the toggle switch using class as follows - <a href="http://www.jqueryscript.net/form/Customizable-Interactive-Toggle-Switch-Plugin-jQuery-btnSwitch.html" rel="nofollow noreferrer">jQuery Toggle Switches</a></p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function () {
          $('.toggle-checkbox').btnSwitch({
              Theme: 'Light',
  
              OnText: "On",
              OffText: "Off",
  
              OnValue: true,
              OffValue: false
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Note:</strong> I've to keep the states of the CheckBoxes shown in the image that aren't red highlighted like for true, checked and vice-versa. Would be delighted to know if this is possible to do the same with toggle switches.</p>
  
  <p><strong>Database Script:</strong></p>
  
  <pre><code>CREATE TABLE [dbo].[Products](
    [Id] [int] IDENTITY(1,1) PRIMARY KEY,
    [ProductName] [nvarchar](MAX) NOT NULL,
    [Time_Posted] [nvarchar](MAX) NOT NULL,
    [Status] [bit] NOT NULL
  )
  
  INSERT INTO Products VALUES
  ('Denim', '7:30:10 PM', 1),
  ('Pringles', '8:00:00 PM', 1)
  </code></pre>
  
  <p><strong>Model:</strong></p>
  
  <pre><code>public class Product
  {
      public int Id { get; set; }
      public string ProductName{ get; set; }
      public string Time_Posted { get; set; }
      public bool Status { get; set; }
  }
  </code></pre>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>//Get details of the products
  [HttpGet]
  public ActionResult Index()
  {
      MainDbContext db = new MainDbContext();
  
      var con = (from c in db.Products
                 select c).ToList();
  
      return View(con);
  }
  
  //Update status of the products like active or inactive    
  [HttpPost]
  public JsonResult UpdateStatus(int id, bool status)
  {
       MainDbContext db = new MainDbContext();
       var result = db.Lists.Find(id);
  
       if (result != null)
       {
          result.Status = status;
          db.Entry(result).State = EntityState.Modified;
          db.SaveChanges();
       }
       return Json(true);
   }
  </code></pre>
  
  <p><strong>View:</strong></p>
  
  <pre><code>@model SampleApp.Models.Product
  @{
      ViewBag.Title = "Index";
  }
  
  &lt;link href="~/Scripts/jquery.btnswitch.css" rel="stylesheet" /&gt;
  &lt;script src="~/Scripts/jquery-3.1.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/jquery.btnswitch.js"&gt;&lt;/script&gt;
  
  &lt;div id="divData"&gt;
      &lt;table class="table table-bordered table-condensed" id="data"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th style="text-align:center;" class="hide"&gt;ID&lt;/th&gt;
                  &lt;th style="text-align:center;"&gt;Products&lt;/th&gt;
                  &lt;th style="text-align:center;"&gt;Time Posted&lt;/th&gt;
                  &lt;th style="text-align:center;"&gt;Status&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          @for (int i = 0; i &lt; Model.Items.Count; i++)
          {
             &lt;tr&gt;
                 &lt;td id="ID" style="text-align: center;" class="hide"&gt;@Html.DisplayFor(modelItem =&gt; Model.Items[i].Id)&lt;/td&gt;
                 &lt;td style="text-align: center;"&gt;@Html.DisplayFor(modelItem =&gt; Model.Items[i].ProductName)&lt;/td&gt;
                 &lt;td style="text-align: center;"&gt;@Html.DisplayFor(modelItem =&gt; Model.Items[i].Time_Posted)&lt;/td&gt;
                 &lt;td style="text-align: center;"&gt;@Html.CheckBoxFor(modelItem =&gt; Model.Items[i].Status, new { @class = "toggle-checkbox", data_id = Model.Items[i].Id })&lt;/td&gt;        
             &lt;/tr&gt;
          }
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      var url = '@Url.Action("UpdateStatus")';
      $('.toggle-checkbox').click(function () {
  
          var isChecked = $(this).is(':checked'); //CheckBox checked - True or false
          var id = $(this).data('id'); //Get the id of that specific checked row
  
          $.post(url, { id: id, status: isChecked }, function (response) {
              if (response) {
                  alert("Status changed");
              } 
          })
      });
  &lt;/script&gt;
  
  &lt;script&gt;
      $(document).ready(function () {
          $('.toggle-checkbox').btnSwitch({ //This is the script for toggling
              Theme: 'Light', 
  
              OnText: "On",
              OffText: "Off",
  
              OnValue: true,
              OffValue: false
          });
      });
  &lt;/script&gt;
  </code></pre>