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();
        }
    });
});


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

Please insert min. 20 characters.

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