Bootstrap模式" shown.bs.modal"不会改变模态中的复选框

时间:2017-09-12 15:12:54

标签: jquery html css twitter-bootstrap django-templates

我的页面加载时需要加载复选框。它将从DjangoTemplate提供的字典中查看,并检查一些复选框。

我尝试使用"shown.bs.modal"执行代码,但后来我发现我的复选框已恢复为默认状态。

我发现使用setInterval()设置复选框正如我想要的那样工作。在模态加载之后,它似乎需要1到2秒才能实际选中复选框。因此,在"shown.bs.modal"重置我的复选框以取消选中后,肯定会发生一些事情。

到目前为止,我的解决方案是在setTimeout()之后使用"shown.bs.modal"来检查复选框。但我仍然想知道原因是什么。

/*
Used to detect if modal page button is triggered or not. These codes does
not set the check boxes checked.
*/
$("#sample").on("shown.bs.modal", function(event) {
  for (var i = 0; i < index_checkbox.length; i ++) {
    console.log("something is actually happened here");
    $("#checkbox-" + index_checkbox).prop("checked", true);
    console.log("the value of `prop('checked')` is changed");
    console.log("but later it goes back to `false`");
  }
}).modal("show");

// These codes checked the check boxes after 1 - 2 seconds.
window.setInterval(function () {
  for (var i = 0; i < index_checkbox.length; i ++) {
    $("#checkbox-" + index_checkbox).prop("checked", true);
  }
}, 1000);

// The checkbox generated from DjangoTemplate.
<input id="checkbox-{{ teacher.id }}" type="checkbox" name="teacher"
    value="{{ teacher.id }}"
    ng-model="teacher_checkbox[{{ forloop.counter0 }}]" />

编辑:实际上,将setInterval()设置为100毫秒也可以。但如果可能的话,我不想使用setInterval()

编辑:0的间隔也有效。我很困惑......

1 个答案:

答案 0 :(得分:0)

您必须在

中包装任何引导事件,例如'shown.bs.whatever'
$(document).ready( function()

});

$(function(){

});