logo标签列表

Bootstrap data-toggle="toggle" 在jQuery中如何实现选中和未选中状态的切换？

jquerytwitter-bootstrapcheckbox
3
我正在使用带有data-toggle="toggle"属性的bootstrap复选框。我想使用jQuery设置它的选中和未选中状态。我尝试了许多方法，但都没有成功。这是我的代码。
<input type="checkbox" data-toggle="toggle" data-size="small" id="checkbox1">

点击按钮：

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

但是当我移除 data-toggle="toggle" 属性时，它能够正常工作。

非常感谢您的帮助！

谢谢。

尝试使用设置属性的方式，$("#checkbox").prop('checked',true);。 - Satpal
1
id 是 checkbox1，但你在 jQuery 选择器中使用的是 checkbox。 - Mani
如果您正在使用 **这个**，请使用 $('#checkbox1').bootstrapToggle('on')。 - Shaunak D
谢谢@Mani，我错过了。但是它还不起作用。 - Udara Herath
谢谢@ShaunakD。它正在工作。 - Udara Herath
3个回答
22

从文档中得知，

使用

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

如果您正在使用prop()或attr()，有一个解决方法，

$('#checkbox1').prop('checked', true).change()
1
如果您使用正确的id名称，则它将起作用，请参见下面的示例。 

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

0
你可以使用这段代码。 Jquery 代码 
$('#chk').prop('checked',true);

HTML 代码

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

在线演示

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接