Question

锚点加载调用我的引导程序模式，如下所示

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

bootstrap模态有一些复选框，每次加载模态时我都希望取消选中它们，所以我在某些帖子中找到了一个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

祝你好运！

以自举模式处理动态元素

1 个答案: