选择一些复选框并根据单选按钮添加readonly attr

Question

我正在使用jQuery插件CheckTree，我可以根据单选按钮自动选择一些复选框。

我有两个单选按钮：

1. 当我们点击默认单选按钮时，某些复选框必须检查并且必须是只读的，并且必须禁用其余复选框（只读）

2. 当我们点击自定义按钮时，必须取消选中所有复选框

Heres是Fiddle

以下是我到目前为止尝试的代码：

<script>
    $(function() {
        $('.check-all').live('change', function() {
            //      $('.tree').find('input[class=cus]').attr('checked', true);
            $('.tree').find('input[class=def]').attr('checked', false);
            //      $('ul.tree').find('input.cus').siblings("div.checkbox").click();
            $('ul.tree').find('input.def').siblings("div.checkbox").click();
        });
        $('.uncheck-all').live('change', function() {
            //  $('.tree').find('input[class=cus]').attr('checked',false);
            $('.tree').find('input[class=def]').attr('checked', true);
            $('ul.tree').find('input.def').siblings("div.checkbox").click();
        });
    });
</script>
<div class="b2"><b>Define categories </b>
</div>
</div>
<form action="http://localhost:8080/cgi-bin/cat_checkbox.pl" method="POST"
name="form1">
    <div class="options">
        <ul>
            <label>
                <input type="radio" name="Selection" class="check-all" value="Default"
                id="type_0" checked="checked" />Default</label>
            <label>
                <input type="radio" name="Selection" class="uncheck-all" value="Custom"
                id="type_1" />Custom</label>
        </ul>
        <ul class="tree">
            <li>
                <input type="checkbox">
                <label>Select All</label>
                <ul>
                    <li>
                        <input type='checkbox' value='1'>
                        <label style="" alt="">main1</label>
                        <ul>
                            <li>
                                <input type='checkbox' name='chk_0' class="def" value='1'>
                                <label>option1</label>
                            </li>
                            <li>
                                <input type='checkbox' name='chk_1' class="def" value='1'>
                                <label>option1</label>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <input type='checkbox' name='' id='10' value='1'>
                        <label>main2</label>
                        <ul>
                            <li>
                                <input type='checkbox' class="cus" name='' id='chk_7' ' value='1 '>  <label>option1</label></li>
        <li><input type='checkbox ' class="cus" name='chk_4 ' id='chk_8
                                ' value='1 '> <label>option1</label></li>
        <li><input type='checkbox ' class="cus" name='chk_5 ' id='chk_9
                                ' value='1 '><label>option1</label></li>
    </ul>
    </li>
    <li><input type='checkbox ' name=' ' id='10 ' value='1 '><label>main3</label>
        <ul style="width: 90%">
        <li><input type='checkbox ' class="cus" name=' ' id='chk_7 '' value='1'>
                                <label>option1</label>
                            </li>
                            <li>
                                <input type='checkbox' class="cus" name='chk_4' id='chk_8' value='1'>
                                <label>option1</label>
                            </li>
                            <li>
                                <input type='checkbox' class="cus" name='chk_5' id='chk_9' value='1'>
                                <label>option1</label>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <input type='checkbox' name='' id='10' value='1'>
                        <label>main3</label>
                        <ul style="width: 90%">
                            <li>
                                <input type='checkbox' class="def" name='' id='chk_7' ' value='1 '><label>option1</label></li>
        <li><input type='checkbox ' class="def" name='chk_4 ' id='chk_8
                                ' value='1 '><label>option1</label></li>
        <li><input type='checkbox ' class="def" name='chk_5 ' id='chk_9
                                ' value='1 '><label>option1</label></li>
    </ul>
    </li>
    <li><input type='checkbox ' name=' ' id='10 ' value='1 '><label>main3</label>
        <ul style="width: 90%">
        <li><input type='checkbox ' class="cus" name=' ' id='chk_7 '' value='1'>
                                <label>option1</label>
                            </li>
                            <li>
                                <input type='checkbox' class="cus" name='chk_4' id='chk_8' value='1'>
                                <label>option1</label>
                            </li>
                            <li>
                                <input type='checkbox' class="cus" name='chk_5' id='chk_9' value='1'>
                                <label>option1</label>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

Answer 1

尝试：http://jsfiddle.net/eRj5c/5/

$(function() {
 $('.check-all').on('change', function(){
        $('.tree').find('input[class=cus]').prop('checked', true);
        $('.tree').find('input[class=def]').prop('checked',false);
        $('.tree').find('input').prop('disabled', 'disabled');
        $('ul.tree').find('input.cus').siblings("div.checkbox").click();
        $('ul.tree').find('input.def').siblings("div.checkbox").click();
 });
 $('.uncheck-all').on('change', function(){
    $('.tree').find('input').prop('checked', true).removeAttr('disabled');
    $('ul.tree').find('input.def').siblings("div.checkbox").click();
 });
 $('.check-all').change();
});

Answer 2

这应该做我认为你想要实现的目标......

function reset() {
    $('.tree').find('input').prop('checked', false).prop('disabled', true);
    $('.tree').find('input.def').prop('checked', true);
}

reset();

$('.check-all').on('click', function(){
    reset();
});

$('.uncheck-all').on('click', function(){
    $('.tree').find('input').prop('checked', false).prop('disabled', false);       
});

Answer 3

试试这个：http://jsbin.com/oteduf/1/edit

的HTML

<input type="radio" name="Selection" class="check-all" value="Default" id="type_0" />

的jquery

 $(function() {
    $(document).on('change', '.check-all', function(){
       $('.tree').find('input[class=def]').prop('checked',true);
       $('ul.tree').find('input.def').siblings("div.checkbox").click();
    });
    $(document).on('change', '.uncheck-all', function(){
       $('.tree').find('input[class=def]').prop('checked', false);
       $('ul.tree').find('input.def').siblings("div.checkbox").click();
    });
 });