多选限制选择数量

最新推荐文章于 2024-06-26 17:02:47 发布

每天都进步一点点

最新推荐文章于 2024-06-26 17:02:47 发布

阅读量3.2k

点赞数

分类专栏： js JQ

本文链接：https://blog.csdn.net/gongqinglin/article/details/78913259

版权

js 同时被 2 个专栏收录

50 篇文章 3 订阅

订阅专栏

37 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>多选 限制选择数量</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" class="check_box" name="welfare[]" value="1" >年底分红
<input type="checkbox" class="check_box" name="welfare[]" value="2" >股票期权
<input type="checkbox" class="check_box" name="welfare[]" value="3" >单休
<input type="checkbox" class="check_box" name="welfare[]" value="4" >双休
<input type="checkbox" class="check_box" name="welfare[]" value="5" >用车补贴
<input type="checkbox" class="check_box" name="welfare[]" value="6" >住房补贴
<input type="checkbox" class="check_box" name="welfare[]" value="7" >包住宿
<input type="checkbox" class="check_box" name="welfare[]" value="8" >五险一金
<input type="checkbox" class="check_box" name="welfare[]" value="9" >带薪年假
<input type="checkbox" class="check_box" name="welfare[]" value="10" >用餐补贴
<script type="text/javascript">
$(function(){
     var num = 0;
     $(".check_box").each(function(){
         $(this).click(function(){
             if($(this)[0].checked) {
                 ++num;
                 if(num == 4) {
                     //alert("最多选择 4项 的上限已满, 其他选项将会变为不可选.");
                     $(".check_box").each(function(){
                         if(!$(this)[0].checked) {
                             $(this).attr("disabled", "disabled");
                         }
                     });
                 }
             } else {
                 --num;
                 if(num <= 3) {
                     $(".check_box").each(function(){
                         if(!$(this)[0].checked) {
                             $(this).removeAttr("disabled");
                         }
                     });
                 }
             }
         });
     });
 })
</script>
</body>
</html>