复选框的行为类似于切换开关

Question

我有一个 ASP.NET 应用程序，其中页面中有一个产品列表，其中包含相关详细信息和状态列（位字段 - 复选框）。它工作得很好，我可以使用 Ajax 将状态从 true 更改为 false，反之亦然。这样做时，我保持复选框的状态意味着如果它为真，则它保持选中状态，否则保持未选中状态。请参见下图，除了红色突出显示的部分（还有一件事 - True 表示处于活动状态，False 表示在这种情况下处于非活动状态）：

现在我正在尝试的是将复选框也变成切换开关，以保持复选框的更改，如下所示 - BootStrap Toggle Switches

我不知道该怎么做，并尝试遵循此操作，使用如下类使复选框用作切换开关 - jQuery 切换开关

<script>
    $(document).ready(function () {
        $('.toggle-checkbox').btnSwitch({
            Theme: 'Light',

            OnText: "On",
            OffText: "Off",

            OnValue: true,
            OffValue: false
        });
    });
</script>

注意： 我必须保留图像中显示的复选框的状态，这些状态不是像“true”、“checked”那样以红色突出显示，反之亦然。我很高兴知道是否可以使用拨动开关执行相同的操作。

数据库脚本：

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)

型号：

public class Product
{
    public int Id { get; set; }
    public string ProductName{ get; set; }
    public string Time_Posted { get; set; }
    public bool Status { get; set; }
}

控制器：

//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);
 }

查看：

@model SampleApp.Models.Product
@{
    ViewBag.Title = "Index";
}

<link href="~/Scripts/jquery.btnswitch.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.1.1.slim.min.js"></script>
<script src="~/Scripts/jquery.btnswitch.js"></script>

<div id="divData">
    <table class="table table-bordered table-condensed" id="data">
        <thead>
            <tr>
                <th style="text-align:center;" class="hide">ID</th>
                <th style="text-align:center;">Products</th>
                <th style="text-align:center;">Time Posted</th>
                <th style="text-align:center;">Status</th>
            </tr>
        </thead>
        <tbody>
        @for (int i = 0; i < Model.Items.Count; i++)
        {
           <tr>
               <td id="ID" style="text-align: center;" class="hide">@Html.DisplayFor(modelItem => Model.Items[i].Id)</td>
               <td style="text-align: center;">@Html.DisplayFor(modelItem => Model.Items[i].ProductName)</td>
               <td style="text-align: center;">@Html.DisplayFor(modelItem => Model.Items[i].Time_Posted)</td>
               <td style="text-align: center;">@Html.CheckBoxFor(modelItem => Model.Items[i].Status, new { @class = "toggle-checkbox", data_id = Model.Items[i].Id })</td>        
           </tr>
        }
        </tbody>
    </table>
</div>

<script type="text/javascript">
    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");
            } 
        })
    });
</script>

<script>
    $(document).ready(function () {
        $('.toggle-checkbox').btnSwitch({ //This is the script for toggling
            Theme: 'Light', 

            OnText: "On",
            OffText: "Off",

            OnValue: true,
            OffValue: false
        });
    });
</script>

Answer 1

您可以在jQuery Toggle Switches

中使用事件

$('.toggle-checkbox').btnSwitch({
   OnValue: 'On',
   OnCallback: function(val) {
       //your ajax code here
   },
   OffValue: 'Off',
   OffCallback: function (val) {
     //your ajax code here
   }
  });

使用此代码更改切换：

$('#toggle-checkbox').btnSwitch({
   ToggleState:true  //for switch on / true
  });

$('#toggle-checkbox').btnSwitch({
   ToggleState:false  //for switch off / false
  });

Answer 2

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider"></span>
</label><br><br>

<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>

试试这个。

Answer 3

您所需要的只是引导程序。下载任何 v5.x.x，这就是您所需要的。关键是 div 类中的 form-switch。应该可以吧

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>