CODEWITHSUNDEEP
jquerytwitter-bootstrapcheckbox
Udara Herath
Udara Herath

Reputation: 885

Bootstrap data-toggle="toggle" checked,unchecked by jquery

I'm using bootstrap checkbox with data-toggle="toggle" attribute. I want to set it checked and unchecked with jquery. I tried many ways but it didn't work. Here is my code.

<input type="checkbox" data-toggle="toggle" data-size="small" id="checkbox1">

for button click:

$("#checkbox").attr('checked',true);

But it's working when I remove data-toggle="toggle" attribute.

Any help is greatly appreciated!

Thanks.

Upvotes: 3

Views: 40072

Answers (3)

Kalu Singh Rao
Kalu Singh Rao

Reputation: 1697

You can use this code.

Jquery Code

$('#chk').prop('checked',true);

HTML Code

<input type="checkbox" id="chk">

Live Demo

Upvotes: 0

Shaunak D
Shaunak D

Reputation: 20626

From the documentation,

Use 

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

If you are using prop() or attr(), there is a workaround,

$('#checkbox1').prop('checked', true).change()

Upvotes: 22

Mani
Mani

Reputation: 2655

It is working if you use id name is correct see the example below

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
	<input type="checkbox" data-toggle="toggle" data-size="small" id="checkbox1">Test
	
</div>

<script>
$(document).ready(function(){
    $("#checkbox1").attr('checked',true);
});
</script>
</body>
</html>

Upvotes: 1

Related Questions