Преобразование CheckBoxes в On-Off Button с помощью Ajax

Question

Мне удалось изменить статус продукта с помощью CheckBox в проекте ASP.NET MVC с помощью Ajax. Ниже приведен код, который я пробовал, и она работала:

Модель:

public class List 
{ 
    [Key] 
    public int Id { get; set; } 

    [Required(ErrorMessage = "Details can't be blank")] 
    [DataType(DataType.Text)] 

    public string Details { get; set; } 
    public string Date_Posted { get; set; } 
    public string Time_Posted { get; set; } 
    public string Time_Edited { get; set; } 
    public string Date_Edited { get; set; } 
    public string Public { get; set; } 
    public int User_Id { get; set; } 
    public bool Status { get; set; } 

    [Display(Name = "Is Public")] 
    public string PublicPostDisplayText 
    { 
     get { return Status ? "Yes" : "No"; } 
    } 
} 

Контроллер:

[HttpPost] 
public JsonResult UpdatePublicPostStatus(int id, bool isPublicPost) 
{ 
    MainDbContext db = new MainDbContext(); 

    var result = db.Lists.Find(id); 
    if (result != null) 
    { 
     result.Status = isPublicPost; 

     db.Entry(result).State = EntityState.Modified; 
     db.SaveChanges(); 
    } 

    return Json(true); 
} 

Вид:

<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].Details)</td> 
    <td style="text-align: center;">@Html.DisplayFor(modelItem => Model.Items[i].Time_Posted)</td> 
    <td style="text-align: center;">@Html.DisplayFor(modelItem => Model.Items[i].Time_Edited)</td> 

    @if (@User.Identity.IsAuthenticated) 
    { 
     <td style="text-align: center;"><div id="demo"></div> @Html.CheckBoxFor(modelItem => Model.Items[i].Status, new { @class = "post-checkbox", data_id = Model.Items[i].Id })</td> 
     <td style="text-align: center;"><a href="@Url.Action("Edit", "Auth")/@Html.DisplayFor(modelItem => Model.Items[i].Id)">Edit</a></td> 
     <td style="text-align: center;"><a href="@Url.Action("Delete", "Auth")/@Html.DisplayFor(modelItem => Model.Items[i].Id)">Delete</a></td> 
     <td class="post-text">@Model.Items[i].PublicPostDisplayText</td> 
    } 
    </tr> 
} 
</tbody> 

<script type="text/javascript"> 
    var url = '@Url.Action("UpdatePublicPostStatus")'; 
    $('.post-checkbox').click(function() { 
     var isChecked = $(this).is(':checked'); 
     var id = $(this).data('id'); 
     var row = $(this).closest('tr'); 
     $.post(url, { id: id, isPublicPost: isChecked }, function (response) { 
      if (response) { 
       var displayText = isChecked ? 'Yes' : 'No'; 
       row.find('.post-text').text(displayText); 
      } else { 

      } 
     }).fail(function() { 
     }); 
    }); 
</script> 

Так вот как это выглядит сейчас:

Я пытаюсь изменить CheckBoxes на кнопку включения-выключения. Я попытался использовать плагин jQuery toggle, заменяющий класс или id CSS. Но мне кажется, что мне нужно сделать что-то еще. Не знаете, как это сделать. Когда я нажимаю на кнопку, значение изменяется в базе данных, но не может показать переключение в интерфейсе.

Примечание: я просто не изменить статус продукта да нет или нет в да с помощью флажков и преобразований CheckBoxes кнопки On-Off аналогично скрина в:

Опять же, я пытался использовать тумблер на основе JQuery с помощью какой-то плагин, как следующие, но не получил он работал:

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script> 
<script src="Content/jquery.btnswitch.min.js"></script> 
<link href="Content/jquery.btnswitch.min.css" rel="stylesheet" /> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.post-checkbox').btnSwitch({ 
      //iOS like button 
      Theme: 'iOS', 

      //On/off text 
      OnText: "On", 
      OffText: "Off", 

      //Values of on/off buttons 
      OnValue: true, 
      OffValue: false 
     }); 
    }) 
</script> 

Answer 1

@Html.CheckBoxFor генерирует <input type="checkbox">. Вы не можете вызвать функцию btnSwitch. Вместо этого просто используйте <div> или <span>.