1

I wanted to have a checkbox tree form and I used dynatree jquery tree to do that. Then I found out dynatree doesn't use real checkboxes so I placed html checkbox inside the tree.

Its working fine until I realise when the node is expanded/collapsed it remvoe the checked (the tick) value Is there a way in javascript I can write a function to prevent this happening?

Thanks so much. Here is my code

 $(function(){
      $("#tree").dynatree({
        // using default options

        checkbox: false,
        selectMode: 3,
        noLink: true,


    });

 <div id="tree">
    <ul>
      <li id="key1" title="Look, a tool tip!">
        <input type="checkbox" id="chb-key1" name="selected_items" value="Item 1" class="" />Item 1</li>
      <li id="key2">
        <input type="checkbox" id="chb-key2" name="selected_items" value="Item 2" />Item 2</li>
      <li id="key3">
        <input type="checkbox" id="chb-key3" name="selected_items" value="Item 3" />Folder with some children
        <ul>
          <li id="key31">
            <input type="checkbox" id="chb-key31" name="selected_items" value="Item 3.1" />Sub-item 3.1</li>
          <li id="key32" class="selected">
            <input type="checkbox" id="chb-key32" name="selected_items" value="Item 3.2" />Sub-item 3.2
            <ul>
              <li id="key321" class="selected">
                <input type="checkbox" id="chb-key321" name="selected_items" value="Item 3.2.1" />Sub-item 3.2.1</li>
              <li id="key322" class="selected">
                <input type="checkbox" id="chb-key322" name="selected_items" value="Item 3.2.2" />Sub-item 3.2.2</li>
            </ul>
          </li>
        </ul>
      </li>
user648198
  • 2,004
  • 4
  • 19
  • 26

1 Answers1

0

I came across the same problem. The way I solved it was to put "checkbox: true," and hide your real checkboxes and check/uncheck them each time the fake boxes are checked/unchecked.

Here is my code:

    $("#storyCategories").dynatree({
    //Tree parameters
    persist: false,
    checkbox: true,
    selectMode: 3,
    activeVisible: true,

    //Un/check real checkboxes recursively after selection
    onSelect: function (select, dtnode) {
        if (select) {
            $("#chb-" + dtnode.data.key).attr("checked", "checked").addClass("hidden");
        } else {
            $("#chb-" + dtnode.data.key).removeAttr("checked").addClass("hidden");
        }
        //  $("#chb-" + dtnode.data.key).attr("checked", select).addClass("hidden");
        dtnode.visit(function (dtnode) {
            if (select) {
                $("#chb-" + dtnode.data.key).attr("checked", "checked").addClass("hidden");
            } else {
                $("#chb-" + dtnode.data.key).removeAttr("checked").addClass("hidden");
            }
        }, null, true);
    },
    //Hack to prevent appearing of checkbox when node is expanded/collapsed
    onExpand: function (select, dtnode) {
        $("#storyCategories :checkbox").addClass("hidden");
        //$("#chb-" + dtnode.data.key).attr("checked", dtnode.isSelected()).addClass("hidden");
        if (dtnode.isSelected()) {
            $("#chb-" + dtnode.data.key).attr("checked", "checked").addClass("hidden");
        } else {
            $("#chb-" + dtnode.data.key).removeAttr("checked").addClass("hidden");
        }
    }
});
    //Hide real checkboxes
    $("#storyCategories :checkbox").addClass("hidden");

I used code from this article but had to update it: http://www.llakomy.com/articles/adding-dynatree-with-checkboxes-to-a-form.

willDaBeast
  • 120
  • 6