Need to disable specific checkbox on selected mode with tree expansion

Problem

I had checkbox tree view, which which i need to disable first two checkbox with selected mode. I can able to do that with help of checked and readonly properties, but i can able to uncheck the checkbox which is not my requirement.

Note : Even i tried with checked and disable properties, if i use disable, it collapse its child nodes.

How to fix it.

JsFiddle : http://jsfiddle.net/uU82C/14/

My try code :

checked and readonly

var completeTreeView ="<div id='treeview-id' class='css-treeview'><ul><li><input type='checkbox' id=GrandParent checked readonly/><label1 for='item-0'>Grand Parent</label1><ul><li><input type='checkbox' id='parent' checked readonly/><label2 for='item-0'>parent</label2>";

checked and disable

var completeTreeView ="<div id='treeview-id' class='css-treeview'><ul><li><input type='checkbox' id=GrandParent checked disable/><label1 for='item-0'>Grand Parent</label1><ul><li><input type='checkbox' id='parent' checked disable/><label2 for='item-0'>parent</label2>";

Please help in out of this.

Problem courtesy of: Hariharan

Solution

Here i modified the sample for you. Hope it may helpful for you. Thanks.

<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>        
$(document).ready(function() { 
    $('input[name="level-1"],input[name="level-2"]').bind('click', function () {
        $('input[type=checkbox]', $(this).parent('li')).attr('checked', ($(this).is(':checked')));
    });

    $('input[name="level-1"],input[name="level-2"]').change(function(e) {
        $(e.target).prop({disabled:true});
    });

    $('input[name="level-1"],input[name="level-2"]').trigger('change');

});
</script>
</head>
<body> 
<ul>
    <li>
    <input type="checkbox" name="level-1">Grand Parent</input>
    <ul>
        <li>
            <input type="checkbox" name="level-2">parent</input>
            <ul>
                <li>
                    <input type="checkbox" name="level-3">child 1</input>
                </li>
                <li>
                    <input type="checkbox" name="level-3">child 2</input>
                </li>
                <li>
                    <input type="checkbox" name="level-3">child 3</input>
                </li>
                <li>
                    <input type="checkbox" name="level-3">Level 3</input>
                </li>
            </ul>
        </li>
    </ul>
    </li>
</ul>
</body>
</html>

Demo

Solution courtesy of: Jeba

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.