Asp.net MVC check/uncheck the checkbox based on a value?

Question

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

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

Mihai Cicu · Accepted Answer · 2016-09-30 12:37:51Z

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);
});

answered Sep 30, 2016 at 12:37

Mihai Cicu

1,9481 gold badge15 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Moeez Over a year ago

I am using both jquery 3.1.0 and chrome and also used the .prop but no use

Dygestor · Accepted Answer · 2016-09-30 14:44:33Z

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

edited Sep 30, 2016 at 14:44

answered Sep 30, 2016 at 14:15

Dygestor

1,2591 gold badge11 silver badges20 bronze badges

1 Comment

Dygestor Over a year ago

I added the methods used to set the state of the checkbox, give it a try.

Collectives™ on Stack Overflow

Asp.net MVC check/uncheck the checkbox based on a value?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related