Tukukkk

There are two checkboxes inside popover in Bootstrap Modal. The fiddle is here.

HTML:

<div class="container-fluid">

    <div class="row">

        <div class="col-12">

            <button type="button" class="btn btn-primary open-modal" data-toggle="modal" data-target="#bs-modal">

            Open Modal

            </button>

            <div class="modal fade" id="bs-modal" tabindex="-1" role="dialog" aria-hidden="true">

                <div class="modal-dialog modal-lg" role="document">

                    <div class="modal-content">

                        <div class="modal-header">

                            <h5 class="modal-title" id="exampleModalLabel">Bootstrap 4 Modal</h5>

                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                            <span aria-hidden="true">&times;</span>

                            </button>

                        </div>

                        <div class="modal-body">

                            <button type="button" class="btn btn-secondary btn-sm bs-popover" data-container="body" data-toggle="popover">

                            Show Popover

                            </button>

                            <div id="popover-content">

                                <div class="form-check">

                                    <input class="form-check-input" type="checkbox" value="1"

                                        id="default-checkbox" name="default-checkbox">

                                    <label class="form-check-label" for="default-checkbox">

                                    Default Checkbox

                                    </label>

                                </div>

                                <br>

                                <div class="custom-control custom-checkbox">

                                    <input type="checkbox" class="custom-control-input" id="custom-checkbox" name="custom-checkbox" value="2">

                                    <label class="custom-control-label" for="custom-checkbox">Custom Checkbox</label>

                                </div>

                            </div>

                        </div>

                        <div class="modal-footer">

                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

                            <button type="button" class="btn btn-primary">Save changes</button>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

CSS:

.open-modal {

    margin: 20px;

}

.modal-body {

    min-height: 200px;

}

#popover-content {

    display: none;

}

JS:

$('.bs-popover').popover({

    html: true,

    content: function() {

        return $('#popover-content').html();

    },

    title: 'Popover Title'

});

1. Problem with Default Checkbox: I'm not able to check it by clicking the label.

2. Problem with Custom Checkbox: It cannot be checked.

Why is this happening? How can I fix it? Any help would be appreciated.

Wrap the checkbox within a label tag:

<div class="form-check">

  <label class="form-check-label">

  <input class="form-check-input" type="checkbox" value="1">

     Default checkbox

  </label>

 </div>

and change your custom checkbox to :

<div class="form-group">

   <label class="custom-control custom-checkbox">

   <input type="checkbox" value="2" name="chbxTerms" class="custom-control-input">

   <span class="custom-control-label" for="chbxTerms">Custom checkbox</span>

   </label>

 </div>

working plunker: http://plnkr.co/edit/yy4sshzCnSmuso0XocOX?p=preview