检查div中的任何两个选中的复选框[重复]答案

【问题标题】：Checking for any two checked checkboxes inside a div [duplicate]检查div中的任何两个选中的复选框[重复]
【发布时间】：2014-06-16 10:24:27
【问题描述】：

我有一个 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>

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

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 渲染，它就不起作用。

【问题讨论】：

你今天早些时候没有问过类似的问题吗？这看起来像是答案之一。
似乎工作：fiddle
嗯，不是你。你认识拉杰吗？ stackoverflow.com/questions/24240621/…
@Barmar：他没有问。那是别人。stackoverflow.com/questions/24240621/…
@MilindAnantwar 我已经更新了这个问题。我认为这会有所帮助

标签： javascript jquery html

【解决方案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);
 }});

【讨论】：