Topic: Checkboxes are not toggling
sandor farkas priority asked 6 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 6 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