[英]Asp.net MVC check/uncheck the checkbox based on a value?
I am working on asp.net MVC 5, i have added a bootstrap toggle switch
of type checkbox
in input
field like bellow 我正在使用asp.net MVC 5,我在input
字段中添加了类型为checkbox
的bootstrap toggle switch
,如bellow
<input id="test_id" name="cmdName" type="checkbox" checked data-toggle="toggle">
I want to do Check/Uncheck the checkbox based on On or Off value 我想根据On或Off值选中Check / Uncheck复选框
Note: By default it's always on 注意:默认情况下,它始终打开
I want to do something like this in my Javascript 我想在我的Javascript中做这样的事情
If(command == "On")
{
//then it will check the checkbox
}
else if (command =="Off")
{
//then it will uncheck the checkbox
}
I have found many similar questions related to it and I tried to implement it but all in vain 我发现了许多与之相关的类似问题,我试图实现它,但都是徒劳的
The links are bellow 链接如下
Also i have tried to add $('input:checkbox[name=cmdName]').attr('checked', false);
我也尝试添加$('input:checkbox[name=cmdName]').attr('checked', false);
including setAttribute
, removeAttribute
, .prop
and many others, but couldn't accomplished the task and i don't know what is the problem 包括setAttribute
, removeAttribute
, .prop
等等,但无法完成任务,我不知道是什么问题
I am using jquery 3.1.0
and bellow are my references 我正在使用jquery 3.1.0
和bellow是我的参考
<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>
Any help would be appreciated 任何帮助,将不胜感激
Check out THIS fiddle . 看看这个小提琴 。
I used jquery 3.1.0 and Chrome to test it. 我使用jquery 3.1.0和Chrome来测试它。
$("#toggler").on("click", function() {
var state = $('#myCheckbox').prop("checked");
if (!state)
$('#myCheckbox').prop("checked", true);
else
$('#myCheckbox').prop("checked", false);
});
Did you check the console for any errors? 您是否检查过控制台是否有任何错误? I'd say the order of your scripts is wrong. 我会说你的脚本的顺序是错误的。 Try including the bootstrap-toggle.js
script after the bootstrap.min.js
. 尝试包括bootstrap-toggle.js
后脚本bootstrap.min.js
。
If there are no errors, try toggling the checkbox like this: 如果没有错误,请尝试切换复选框,如下所示:
$('#test_id').bootstrapToggle('on')
Or 要么
$('#test_id').bootstrapToggle('off')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.