如何限制checkbox最多勾选个数

来源:互联网 发布:js ajax视频教程 编辑:程序博客网 时间:2024/06/05 15:10

直接上代码,分jsp和javascript两部分,以最多勾选6个为例,样式可能会乱,当做例子而已

jsp

<ul class="key-word-ul">
                    <li class="key-word-li">
                        <input type="checkbox" id='checkC1' name='checkC' />
                        <label for="checkC1"> 严谨 </label>
                    </li>

                    <li class="key-word-li">
                        <input type="checkbox" id='checkC2' name='checkC' />
                        <label for="checkC2"> 稳重 </label>
                    </li>

                    <li class="key-word-li">
                        <input type="checkbox" id='checkC3' name='checkC' />
                        <label for="checkC3"> 善于分析 </label>
                    </li>

                    <li class="key-word-li">
                        <input type="checkbox" id='checkC4' name='checkC' />
                        <label for="checkC4"> 勤奋 </label>
                    </li>

                    <li class="key-word-li">
                        <input type="checkbox" id='checkC5' name='checkC' />
                        <label for="checkC5"> 将心比心 </label>
                    </li>

                    <li class="key-word-li">
                        <input type="checkbox" id='checkC6' name='checkC' />
                        <label for="checkC6"> 精细 </label>
                    </li>

                   <li class="key-word-li">
                        <input type="checkbox" id='checkC7' name='checkC' />
                        <label for="checkC7"> 快乐 </label>
                    </li>

                    <li class="key-word-li">
                        <input type="checkbox" id='checkC8' name='checkC' />
                        <label for="checkC8"> 慎重 </label>
                    </li>

                    <li class="key-word-li">
                        <input type="checkbox" id='checkC9' name='checkC' />
                        <label for="checkC9"> 分类 </label>
                    </li>


</ul>


javascript


$('input[type=checkbox]').click(
                function() {
                    var clickindex = $(this).parent('.key-word-li').index();
                    $("input[name='checkC']").attr('disabled', true);
                    $(".key-word-li").eq(clickindex).children("label").css({
                        'color' : '#fff',
                        'background-color' : '#f09049'
                    });

                    if ($("input[name='checkC']:checked").length >= 6) {
                        $("input[name='checkC']:checked").attr('disabled',
                                false);
                    } else {
                        var state = $(".key-word-li").eq(clickindex).children(
                                "input").prop("checked");
                        if (state == true) {
                            $(".key-word-li").eq(clickindex).children("label")
                                    .css({
                                        'color' : '#fff',
                                        'background-color' : '#f09049'
                                    });

                        } else {
                            $(".key-word-li").eq(clickindex).children("label")
                                    .css({
                                        'color' : '#000',
                                        'background-color' : '#fff'
                                    });
                        }
                        $("input[name='checkC']").attr('disabled', false);
                    }
                });