treeview只选择一个父节点

Question

在我的树视图中我有很多父节点和子节点，当父节点在应该展开后被选中并且其他父节点应该被禁用时。

我的jquery是

$('.treecheck').on('click', function() {
     $('.hitarea').next('input').prop('checked', false);
});

html是

<ul class="treeview" id="grouptree">
<li class="expandable">
    <div class="hitarea expandable-hitarea"></div>
    <input type="checkbox" class="treecheck" value="1" name="Profile[groups][]" original-title=""><span class="checkboxtree">one</span>
    <ul style="display: none;">
        <li>
            <input type="checkbox" class="treecheck" value="16" name="Profile[groups][]" original-title=""><span class="checkboxtree">11</span>
        </li>
        <li class="last">
            <input type="checkbox" class="treecheck" value="21" name="Profile[groups][]" original-title=""><span class="checkboxtree">12</span>
        </li>
    </ul>
</li>
<li class="expandable">
    <div class="hitarea expandable-hitarea"></div>
    <input type="checkbox" class="treecheck" value="2" name="Profile[groups][]" original-title=""><span class="checkboxtree">two</span>
    <ul style="display: none;">
        <li class="last">
            <input type="checkbox" class="treecheck" value="17" name="Profile[groups][]" original-title=""><span class="checkboxtree">2</span>
        </li>
    </ul>
</li>
<li class="expandable">
    <div class="hitarea expandable-hitarea"></div>
    <input type="checkbox" class="treecheck" value="3" name="Profile[groups][]" original-title=""><span class="checkboxtree">three</span>
    <ul style="display: none;">
        <li class="last">
            <input type="checkbox" class="treecheck" value="18" name="Profile[groups][]" original-title=""><span class="checkboxtree">3</span>
        </li>
    </ul>
</li>
<li class="last">
    <input type="checkbox" class="treecheck" value="15" name="Profile[groups][]" original-title=""><span class="checkboxtree">four</span>
</li>

小提琴链接 http://jsfiddle.net/jSwxE/4/