如何限制checkbox最多勾选个数

直接上代码,分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);
                    }
                });

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值