Question

我有一个buildTree（）;在嵌套UL中的LI中构建复选框的函数。最外层的UL包含在div＃tree中。

HTML

<div id="tree">
    <ul>
        <li class="speed parent-list">
            <input type="checkbox" name="speed" id="speed">speed<span class="glyphicon glyphicon-chevron-up"></span>
            <ul class="speed" style="display: block;">
            <li class="hor_speed"><input type="checkbox" name="hor_speed" id="hor_speed">hor_speed</li>
            <li class="ver_speed"><input type="checkbox" name="ver_speed" id="ver_speed">ver_speed</li>
            <li class="heading"><input type="checkbox" name="heading" id="heading">heading</li>
            </ul>
        </li>
        <li class="health"><input type="checkbox" name="heading" id="heading">health</li>
        <li class="battery_level"><input type="checkbox" name="heading" id="heading">battery_level</li>
    </ul>
</div>

我希望在检查树中的任意两个复选框后禁用所有其他复选框。到目前为止，我已经完成了这么多，但它不起作用。

JS

buildTree();

var checkboxes = $('#tree [type=checkbox]');

checkboxes.change(function(){
  if(checkboxes.filter(':checked').length === 2){
   checkboxes.filter(':not(:checked)').prop('disabled',true);
  }
  else {
   checkboxes.prop('disabled',false);
  }
});

更新如果我将渲染的树直接放在HTML文件中但是一旦使用jquery渲染它，代码就可以完美地工作了。

Answer 1

看起来您正在动态加载内容，您需要事件委派才能将事件附加到动态添加的DOM。像这样：

 $('#tree').on('change','[type=checkbox]',function(){
 if($('#tree [type=checkbox]').filter(':checked').length === 2){
   $('#tree [type=checkbox]').filter(':not(:checked)').prop('disabled',true);
 }
 else {
   $('#tree [type=checkbox]').prop('disabled',false);
 }});

检查div中任何两个选中的复选框

1 个答案: