我一直在尝试使用jQuery的复选框隐藏/显示bootstrap 4折叠
`<script type="text/javascript">
$('.card-header').click(function() {
$(this).find('input[name="question"]').prop('checked', true);
});
</script>`
`<div class="card">
<div class="card-header" id="headingOne">
<div class="checkbox-wrap">
<input class="form-check-input" type="checkbox" name="question" disabled>
</div>
<h2 id="question-1">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
lorem Ipsome
</button>
</h2>
</div>
<hr>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#faq">
<div class="card-body">
<p>lorem posem</p>
</div>
</div>
</div>`
我已经使用了这段代码。这将在显示时显示已选中的复选框,但在折叠时不会取消选中
图像
你可以检查按钮属性iearia-expanded
是否为true
或false
取决于此属性checked
或unchecked
复选框。
演示代码:
$('.card-header').click(function() {
//get the attr aria expanded if true means collapse is shown
if ($(this).find('button.btn-link').attr('aria-expanded') === "true") {
$(this).find('input[name="question"]').prop('checked', false);//unchecked
} else {
$(this).find('input[name="question"]').prop('checked', true);
//checked
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="card">
<div class="card-header" id="headingOne">
<div class="checkbox-wrap">
<input class="form-check-input" type="checkbox" name="question" disabled>
</div>
<h2 id="question-1">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
lorem Ipsome
</button>
</h2>
</div>
<hr>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#faq">
<div class="card-body">
<p>lorem posem</p>
</div>
</div>
<div class="card-header" id="headingOne">
<div class="checkbox-wrap">
<input class="form-check-input" type="checkbox" name="question" disabled>
</div>
<h2 id="question-2">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
lorem Ipsome
</button>
</h2>
</div>
<hr>
<div id="collapseTwo" class="collapse" aria-labelledby="headingOne">
<div class="card-body">
<p>lorem posem</p>
</div>
</div>
</div>
谢谢你为我工作
但是,仍然有一个小错误试图折叠第二个div都显示为选中状态
嗨,我在上面的演示代码中没有看到任何这样的行为..您能用原始代码创建jsfiddle吗?问题可能在那里
可以,我已经解决了尝试使用单选按钮的问题