CheckBox будет вести себя как тумблеры ⇐ Jquery

[Anonymous]

У меня есть приложение ASP.NET, в котором на странице есть список продуктов со соответствующими сведениями и столбцом состояния (битовое поле — CheckBox). Он работает отлично, и я могу изменить статус с true на false или наоборот с помощью Ajax. При этом я сохраняю состояние CheckBox, что означает, что если оно истинно, то оно остается отмеченным, в противном случае — непроверенным. См. изображение ниже, за исключением выделенного красным (еще одна вещь: True означает активный, а false означает неактивный продукт в этом сценарии):








ID
Products
Time Posted
Status



@for (int i = 0; i < Model.Items.Count; i++)
{

@Html.DisplayFor(modelItem => Model.Items.Id)
@Html.DisplayFor(modelItem => Model.Items.ProductName)
@Html.DisplayFor(modelItem => Model.Items.Time_Posted)
@Html.CheckBoxFor(modelItem => Model.Items.Status, new { @class = "toggle-checkbox", data_id = Model.Items.Id })

}




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



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

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

OnValue: true,
OffValue: false
});
});



Подробнее здесь: https://stackoverflow.com/questions/455 ... e-switches