jqery 监听CheckBox 选中、取消禁用、启用复选框

最新推荐文章于 2021-03-18 22:09:16 发布

Zaajuan1150

最新推荐文章于 2021-03-18 22:09:16 发布

阅读量1k

点赞数

分类专栏： http 前端文章标签： CheckBox JS

本文链接：https://blog.youkuaiyun.com/Zaajuan1150/article/details/103630340

版权

前端同时被 2 个专栏收录

3 篇文章

订阅专栏

http

2 篇文章

订阅专栏

<body>
<form>
<input  type='checkbox' >
<input  type='checkbox' >
<input  type='checkbox' >
<input type='checkbox' >
<input type='checkbox' >
    </form>
</body>

<script type="text/javascript" src='http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js'></script>
<script type="text/javascript">
    // var box=document.getElementById("check");
    // alert(box.checked);
    // 判断是否被拒选中，选中返回true，未选中返回false

    //获取CheckBox选中数【$('input:checked').length】，到5则遍历禁用其他未选择的框【$("input[type=checkbox]:not(:checked)")】
    $(":checkbox").on("change",function(){
        if ($('input:checked').length >= 5){
            // $("input:checkbox").not("input:checked").each(function(){
            //     $(this).attr("disabled",true);
            // });
            $("input[type=checkbox]:not(:checked)").each(function(){
                $(this).attr("disabled",true);//禁用
            });
        }else {
            $("input[type=checkbox]").each(function(){
                $(this).attr("disabled",false);//启用
            });
        }
    });
</script>

获取所有未选择的复选框：

$("input[type=checkbox]:not(:checked)")

遍历并禁用：

$("input[type=checkbox]:not(:checked)").each(function(){
   $(this).attr("disabled",true);//禁用
 });

jqery 监听CheckBox 选中、取消 禁用、启用复选框

jqery 监听CheckBox 选中、取消禁用、启用复选框