Question

<ul ="staffTree">
    <li>
        <input type="checkbox" name="selectedNode" id="selectedNode" value = "Manager">
        Manager
        <ul>
            <li>
                <input type="checkbox" name="selectedNode" id="selectedNode" value = "AsstManager">
                Asst. Manager
                <ul>
                    <li>
                        <img src="images/not_allowed.png" title="Not Allowed">
                        Staff Member 1
                    </li>
                    <li>
                        <img src="images/not_allowed.png" title="Not Allowed">
                          Staff Member 2
                    </li>
                    <li>
                        <img src="images/not_allowed.png" title="Not Allowed">
                          Staff Member 3
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

In this example, no checkbox exists with any staff member, so I want to replace the input field of Asst. Manager with that “Not Allowed” image.
If any checkbox exists in any li. Then the parent will also contain the checkbox. And the super parent (Manager) will also have. The tree will be of N level.

I am trying to make a jQuery selector for it. And need pointer on it.

Answer 1

$('#staffTree li > input:checkbox').each(function () {
  var $this = $(this);
  if ($this.siblings().has('li > input:checkbox').length) {
    return;
  }
  $this.replaceWith('<img src="images/not_allowed.png" title="Not Allowed">');
});

here is a fiddle http://jsfiddle.net/823vR/