Checking for any two checked checkboxes inside a div

Question

I have a buildTree(); function that builds checkboxes in LIs within nested ULs. The outermost UL is wrapped inside 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>

I want all other checkboxes to be disabled once any two checkboxes inside the tree are checked. I have done this much so far but it does not work.

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);
  }
});

UPDATE The code works perfect if I place the rendered tree in the HTML file directly but once it it rendered using jquery, it does not work.

Didn't you ask a similar question earlier today? That looks like one of the answers. — Barmar, Jun 16 '14 at 10:27
Hmm, it wasn't you. Do you know Raj? http://stackoverflow.com/questions/24240621/disable-other-checkboxes-if-two-of-them-are-selected-using-jquery#24240710 — Barmar, Jun 16 '14 at 10:28
@Barmar: he did not asked it. that was somebody else.http://stackoverflow.com/questions/24240621/disable-other-checkboxes-if-two-of-them-are-selected-using-jquery/ — Milind Anantwar, Jun 16 '14 at 10:28
@MilindAnantwar I have updated the question. I think that will help — Nishan Hitang, Jun 16 '14 at 10:32
@ReccurNishan: have you seen the link to the question for which this question is marked as duplicate?? it eaxactly does the same stuff. — Milind Anantwar, Jun 16 '14 at 10:33
@ReccurNishan, May my answer at http://stackoverflow.com/questions/21239210/jquery-event-not-triggering-for-dom-elements-created-after-page-load help. Also it would be nice if you add code of `buildTree();` — Satpal, Jun 16 '14 at 10:33
@ReccurNishan: why did not you mentioned that before in the question?? — Milind Anantwar, Jun 16 '14 at 10:39

score 1 · Answer 1 · answered Jun 16 '14 at 10:38

Looks like you are loading the content dynamically, you need event delegation to attach the event to dynamically added DOM. Something like this:

 $('#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);
 }});

Checking for any two checked checkboxes inside a div

1 Answers1