使用 if else 将切换开关从 On 更改为 Off 或从 Off 更改为 On答案

【问题标题】：Changing toggle switch from On to Off or Off to On using if else使用 if else 将切换开关从 On 更改为 Off 或从 Off 更改为 On
【发布时间】：2017-02-08 15:52:53
【问题描述】：

我正在使用 asp.net MVC 5。我放置了一个引导切换开关按钮，上面有 input type checkbox

下面是我的拨动开关的图像

从我的查询中，我得到一个命令名称 cmd_Name，其中有 On 或 Off 值，基于此值，我只想更改切换开关从 On-Off 或 Off-On

Bellow 是我切换的剃刀语法

@using (Html.BeginForm())
{
//var cmd_Name = Session["cmd_Name"];
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

<fieldset style="height:60px">
    <legend style="text-align:center;  font-size:large; font-family:'Times New Roman'; background-color:#C8E6C9; color:red">Remote On/Off</legend>
    <input id="test_id" name="cmdName" type="checkbox" checked data-toggle="toggle">

</fieldset>}

下面是我的切换脚本

<script type="text/javascript">
var search = '@Session["search"]';
var cmd_Name = '@Session["cmd_Name"]';
var data = {}
//alert(cmd_Name);
$(window).on('load', function () {

    // here cmd_Name i having On or Off value 

    // i want to put a check like bellow

    if(cmd_Name == "On")
    {
      // then the toggle switch (checkbox) moves to On
     // what should place here that moves the switch from on to off and vise versa
    }
    else
    {
      //then toggle switch (checkbox) moves to Off
    }

})</script>

更新代码

下面是我更新的代码和错误的图像

更新代码 2

我在布局的headsection 中有以下声明

<head>
<title>@ViewBag.Title</title>
@*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*@


<script type="text/javascript" src="~/Scripts/jquery-3.1.0.min.js"></script>
<script src="~/Scripts/bootstrap-toggle.js"></script>
<link href="~/Content/bootstrap-toggle.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />    
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js?key=MyKey"></script>


<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/ico" />
<link rel="shortcut icon" href="~/favicon.ico" /></head>

见bundle.config

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

我在if...else 中尝试过很多东西，比如$("#test_id").checked = true/false，我也尝试过document.getElementById("test_id").checked

但一切都是徒劳的，任何帮助将不胜感激

【问题讨论】：

现在，真正的问题是什么？ data 不变？ AJAX 不发送？你确定引导程序会像你写的那样渲染复选框，即#test_id 是否存在于渲染的源代码中？
@Teemu .on("change") 事件仅在开关从 On 更改为 Off 或 Off 更改为 On 然后在 ajax 中传递数据和搜索（序列号）时才起作用控制器我已经放置了一个插入查询，它将数据插入到数据库中
@Teemu 然后放置一个获取查询，我从中执行了命令名称（cmd_Name），然后存储在会话变量中，然后在我的 JavaScript 中传递了这个变量。在这里我只想更改基于开关的命令名称值
@Teemu 请在加载窗口后立即查看 if..else 部分
现在还不清楚你在问什么。 window.onload 应该只执行一次。如果要更改cmd_Name 的值，则必须在onchange 处理程序中进行，或者在AJAX 调用的回调中进行，因为cmd_Name 是全局的。请注意，您所说的所有尝试都指的是#test_id，而不是cmd_Name，现在看来，问题出在cmd_Name。这就是为什么这个问题如此令人困惑的原因。

标签： javascript jquery twitter-bootstrap asp.net-mvc-5

【解决方案1】：

试试这个 -

if(cmd_Name == "On") {
    $("#test_id").attr("checked", "checked");
} else if(cmd_Name == "Off") {
   $("#test_id").removeAttr("checked");
}

你也可以这样做

if(cmd_Name == "On") {
    $("#test_id").bootstrapToggle("on")
} else if(cmd_Name == "Off") {
   $("#test_id").bootstrapToggle("off")
}

【讨论】：

对于两者我都遇到相同的错误error CS0103: The name '$' does not exist in the current context
也就是说你需要添加对jquery的引用
jquery 在我的布局中，切换代码在我的局部视图中
如果你没有包含 jquery 或者你在加载之前执行你的代码，就会出现错误。还要确保你没有加载 jquery 两次
那么在这种情况下该怎么办？我无法在部分视图中添加 jquey 引用，因为它会与布局中的引用冲突