1

I am working on asp.net MVC 5, i have added a bootstrap toggle switch of type checkbox in input field like 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

Note: By default it's always on

I want to do something like this in my 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

  1. Link 1
  2. Link 2
  3. Link 3
  4. Link 4

Also i have tried to add $('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

I am using jquery 3.1.0 and bellow are my references

<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

Community
  • 1
  • 1
Moeez
  • 494
  • 9
  • 55
  • 147

2 Answers2

1

Check out THIS fiddle.

I used jquery 3.1.0 and Chrome to test it.

$("#toggler").on("click", function() {
    var state = $('#myCheckbox').prop("checked");
    if (!state)
        $('#myCheckbox').prop("checked", true);
    else
        $('#myCheckbox').prop("checked", false);
});
Mihai Cicu
  • 1,879
  • 1
  • 14
  • 19
0

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.

If there are no errors, try toggling the checkbox like this:

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

Or

$('#test_id').bootstrapToggle('off')
Dygestor
  • 1,259
  • 1
  • 10
  • 20