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