在引导模式中处理动态元素

Question

锚加载调用我的引导模式如下

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

引导模式有一些复选框，我希望每次加载模式时都取消选中这些复选框，所以我在一些帖子上找到了一个 jquery

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

我无法取消选中复选框状态。我不确定我在这里缺少什么。我可以在不同按钮的单击事件上提醒下面返回的值，并且我得到正确的值 true/false

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

编辑 2 添加使用从 C# 控制器填充的 ViewBag 加载模板的模式。

<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>

我提到的帖子：stackoverflow, 任何提示都会有所帮助。

Answer 1

您需要包含应该替换的 HTML：

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

因为您的选择器可能有问题。我能够制作一个具有 3 个复选框的工作演示，每次模态显示时，前两个都重置为 false，而第三个则没有。您应该能够通过查看此内容来解决您的问题。如果没有，请发布您的所有 html，不要使用剃须刀代码。

<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

祝你好运！