Topic: Checkboxes are not toggling
sandor farkas
priority
asked 7 years ago
I'm unable to check/uncheck checkboxes inside a popover.
This is my simple example which does not work:
<div class="container">
<ul class="list-unstyled">
<li><a data-placement="bottom" data-toggle="popover" data-container="body" data-placement="left" type="button" data-html="true" href="#" id="login">TEST</a></li>
<div id="popover-content" class="d-none">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="checkbox100" checked="checked">
<label class="form-check-label" for="checkbox100">Classic checkbox</label>
</div>
<div class="form-check">
<input type="checkbox" class="filled-in form-check-input" id="checkbox101" checked="checked">
<label class="form-check-label" for="checkbox101">Filled-in checkbox</label>
</div>
</div>
</ul>
</div>
$(function () {
$("[data-toggle=popover]").popover({
html: true,
content: function () {
return $('#popover-content').html();
}
});
});
Add comment
Mikołaj Smoleński
staff
answered 7 years ago
You should add content like this:
<ul class="list-unstyled"> <li><a data-placement="bottom" data-toggle="popover" data-content=" <div id='popover-content'> <div class='form-check'> <input type='checkbox' class='form-check-input' id='checkbox100' checked='checked'> <label class='form-check-label' for='checkbox100'>Classic checkbox</label> </div> <div class='form-check'> <input type='checkbox' class='filled-in form-check-input' id='checkbox101' checked='checked'> <label class='form-check-label' for='checkbox101'>Filled-in checkbox</label> </div> </div>" type="button" data-html="true" href="#" id="login">TEST</a></li> </ul>Regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags