Asp.net MVC根据值检查/取消选中复选框?

时间:2016-09-30 11:52:25

标签: javascript jquery checkbox twitter-bootstrap-3 asp.net-mvc-5

我正在使用asp.net MVC 5,我在bootstrap toggle switch字段中添加了checkboxinput,如bellow

 <input id="test_id" name="cmdName" type="checkbox" checked data-toggle="toggle">

我想根据开启关闭

选中选中/取消选中复选框

注意:默认情况下,它始终在

我想在我的Javascript中做这样的事情

If(command == "On")
{
  //then it will check the checkbox
}
else if (command =="Off")
{
  //then it will uncheck the checkbox     
}

我发现了许多与之相关的类似问题,我试图实现它,但都是徒劳的

链接如下:

  1. Link 1
  2. Link 2
  3. Link 3
  4. Link 4
  5. 此外,我还尝试添加$('input:checkbox[name=cmdName]').attr('checked', false);,包括setAttributeremoveAttribute.prop和其他许多人,但无法完成任务,我不会知道是什么问题

    我正在使用jquery 3.1.0,而下面是我的参考资料

    <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>
    

    任何帮助将不胜感激

2 个答案:

答案 0 :(得分:0)

查看THIS fiddle

我使用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);
});

答案 1 :(得分:0)

您是否检查过控制台是否有任何错误?我说你的脚本的顺序是错误的。尝试在bootstrap-toggle.js之后添加bootstrap.min.js脚本。

如果没有错误,请尝试切换如下所示的复选框:

$('#test_id').bootstrapToggle('on')

或者

$('#test_id').bootstrapToggle('off')