Handling dynamic elements in a bootstrap modal

Question

An anchor loads calls my bootstrap modal as follows

<a class="btn" data-popover="popover" data-content="" data-id="" data-form="das" data-toggle="modal" data-target="#DownloadAsModal"></a>

The bootstrap modal has some checkboxes, which i want to be unchecked each time when the modal loads and so I found a jquery on some posts as

$('#DownloadAsModal').on('show.bs.modal', function () {
  $('#jpgCheck').prop('checked', false);
  $('#jpgcmykCheck').prop('checked', false);
  $('#jpgrgbCheck').prop('checked', false);
}

I could not get the checkbox state to be unchecked. I'm not sure what I'm missing here. I can alert the values returned by the below on a clicking event for a different button and I get proper values true/false

var isJpgChecked = $('#jpgCheck').prop('checked', false);

EDIT 2 Adding the modal which loads the template using the ViewBag populated from a C# controller.

<div class="modal fade modal-wide" id="DownloadAsModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">

        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Download Options</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <input type="text" id="mdb_document_id" value="" disabled>

                <!-- Content to be loaded here-->
                @Html.Raw(HttpUtility.HtmlDecode(@ViewBag.Download_As_Modal_Body))

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="Convert">Convert</button>
                <button class="btn grey" type="button" data-dismiss="modal"><i class="fa fa-times"></i> @MediabaseUI.GetResourceValue("BtnClose")</button>
            </div>
        </div>
    </div>
</div>

Post I have referred to : stackoverflow, Any tips would be helpful.

Are the checkboxes added dynamically? Or are they available in the page but not just visible when the page is first loaded? — Jerdine Sabio, Oct 19 '18 at 08:43
Do you have multiple checkbox elements in the DOM with the same `id`? — Rory McCrossan, Oct 19 '18 at 08:44
@JerdineSabio that wouldn't have an impact in this case as the OP is not binding events to the checkboxes. — Rory McCrossan, Oct 19 '18 at 08:44
Possible duplicate of [Bootstrap, jQuery in modal doesn't work](https://stackoverflow.com/questions/27146258/bootstrap-jquery-in-modal-doesnt-work) — Scott, Oct 19 '18 at 08:54
@RoryMcCrossan, I have Multiple checkboxes with different id's — Binoy Cherian, Oct 19 '18 at 08:57
Then your code should be working. Without a demo showing the problem there's not much more anyone can do to help you — Rory McCrossan, Oct 19 '18 at 08:59
@RoryMcCrossan, added the bootstrap modal into the EDIT 2 section, let me know if you require any other info. — Binoy Cherian, Oct 19 '18 at 12:21

score 1 · Accepted Answer · answered Oct 19 '18 at 13:42

You need to include the HTML that should replace:

<!-- Content to be loaded here-->
@Html.Raw(HttpUtility.HtmlDecode(@ViewBag.Download_As_Modal_Body))

Because it is likely a problem with your selector. I was able to make a working demo that has 3 checkboxes, and the first two reset to false every time the modal shows, and the third one does not. You should be able to solve your problem by reviewing this. If not, post ALL your html, no razor code pls.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<a class="btn" data-popover="popover" data-content="" data-id="" data-form="das" data-toggle="modal" data-target="#DownloadAsModal">Click to show modal</a>

<div class="modal fade modal-wide" id="DownloadAsModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Download Options</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- html replacing razor content for demo purposes -->
                <input type="checkbox" class="reset" /> I will always be reset <br/>
                <input type="checkbox" class="reset" /> So Will I<br/>
                <input type="checkbox" /> I will never be reset<br/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="Convert">Convert</button>
                <button class="btn grey" type="button" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
// on show.bs.modal
// find all inputs with class="reset" (may be different for you)
// loop over each of them, reset prop to false

$('#DownloadAsModal').on('show.bs.modal', function () {
  $(this).find('input.reset').each(function(index, item){
    $(item).prop('checked',false);
  });
}); 
</script>

JS Fiddle Demo

Good Luck!

This was the code to be replaced. `

` – Binoy Cherian Oct 19 '18 at 14:11 — Binoy Cherian, Oct 19 '18 at 14:11

Handling dynamic elements in a bootstrap modal

1 Answers1