广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >jQuery如何限制多选框选择数量
  • 349
分享到

jQuery如何限制多选框选择数量

2024-04-02 19:04:59 349人浏览 安东尼
摘要

这篇文章主要介绍Jquery如何限制多选框选择数量,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!由于刷新后,多选框会保留选中的,这时数量达到要求后还是可以选择的bug,在前面加个判断

这篇文章主要介绍Jquery如何限制多选框选择数量,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

由于刷新后,多选框会保留选中的,这时数量达到要求后还是可以选择的bug,在前面加个判断数量是否数量达到要求的处理就可以了。

<html>
<head>
<meta Http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
$(function(){

//加上判断是否达到数量要求
  if($(":checkbox").size()>=3){
     $(":checkbox").removeAttr("checked");
     $(":checkbox").attr("disabled","disabled");
     $(":checkbox").removeAttr("disabled");
   }

  var num = 0;
  $(":checkbox").each(function(){
    $(this).click(function(){
      if($(this)[0].checked) {
        ++num;
        if(num == 3) {
          //alert("最多选择 三项 的上限已满, 其他选项将会变为不可选.");
          $(":checkbox").each(function(){
            if(!$(this)[0].checked) {
              $(this).attr("disabled", "disabled");
            }
          });
        }
      } else {
        --num;
        if(num <= 2) {
          $(":checkbox").each(function(){
            if(!$(this)[0].checked) {
              $(this).removeAttr("disabled");
            }
          });
        }
      }
    });
  });
})
</script> 
</head>

<body>
<input type="checkbox" />上网<br />
<input type="checkbox" />旅游<br />
<input type="checkbox" />逛街<br />
<input type="checkbox" />游戏<br />
<input type="checkbox" />听歌<br />
<input type="checkbox" />购物<br />
</body>
</html>

以上是“jQuery如何限制多选框选择数量”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网VUE频道!

--结束END--

本文标题: jQuery如何限制多选框选择数量

本文链接: https://www.lsjlt.com/news/78853.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • jQuery如何限制多选框选择数量
    这篇文章主要介绍jQuery如何限制多选框选择数量,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!由于刷新后,多选框会保留选中的,这时数量达到要求后还是可以选择的bug,在前面加个判断...
    99+
    2022-10-19
  • jQuery如何限制选择的区域
    这篇文章将为大家详细讲解有关jQuery如何限制选择的区域,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。限制选择的区域//Where possible, pre-fix&nb...
    99+
    2023-06-27
  • jquery的选择器的使用技巧之如何选择input框
    下面的方法是选择name是redthree的 并且选中了的input 里面的 title属性的内容 <input name="redTrdd" title='xiaoming'...
    99+
    2022-11-15
    jquery选择器 选择input框
  • 如何实现jQuery多选框功能
    这篇文章主要介绍如何实现jQuery多选框功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Jquery多选框的基本操作:支持全选、反选、取消全选的功能HTML正文:<inpu...
    99+
    2022-10-19
  • jQuery如何实现选择或者不选页面上全部复选框
    这篇文章主要为大家展示了“jQuery如何实现选择或者不选页面上全部复选框”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何实现选择或者不选页面上全部复选框”这篇文章吧。选择或者不选...
    99+
    2023-06-27
  • jQuery如何避免多个ID选择符
    这篇文章主要介绍了jQuery如何避免多个ID选择符,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。避免多个ID选择符在此强调,ID 选择符应...
    99+
    2022-10-19
  • jQuery如何处理多个选择结果
    本文小编为大家详细介绍“jQuery如何处理多个选择结果”,内容详细,步骤清晰,细节处理妥当,希望这篇“jQuery如何处理多个选择结果”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。jQuery 提供 .each...
    99+
    2023-06-27
  • jQuery如何模拟12306城市选择框功能
    这篇文章主要介绍jQuery如何模拟12306城市选择框功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体如下:<!DOCTYPE html> <ht...
    99+
    2022-10-19
  • jQuery如何定义一个定制的选择器
    这篇文章主要为大家展示了“jQuery如何定义一个定制的选择器”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何定义一个定制的选择器”这篇文章吧。定义一个定制的选择器$.expr[&...
    99+
    2023-06-27
  • jquery如何限制文本框中输入的字符数量
    本篇内容介绍了“jquery如何限制文本框中输入的字符数量”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!在jQuery中,我们可以使用att...
    99+
    2023-07-05
  • jQuery如何限制textarea的字符数量
    这篇文章主要介绍jQuery如何限制textarea的字符数量,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!限制textarea的字符数量jQuery.fn.maxLength = functio...
    99+
    2023-06-27
  • layer提示框如何添加多个按钮选择
    这篇文章给大家分享的是有关layer提示框如何添加多个按钮选择的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。如下所示:function jumpChoose(argu)...
    99+
    2022-10-19
  • jQuery如何选取所有复选框被选中的值并用Ajax异步提交数据
    这篇文章将为大家详细讲解有关jQuery如何选取所有复选框被选中的值并用Ajax异步提交数据,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。示例:首先,我做了一个简单的多个...
    99+
    2022-10-19
  • lhgcalendar时间插件如何限制只能选择三个月
    这篇文章给大家分享的是有关lhgcalendar时间插件如何限制只能选择三个月的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。代码   function&nbs...
    99+
    2022-10-19
  • 如何使用jQuery实现可输入多选下拉组合框
    这篇文章主要为大家展示了“如何使用jQuery实现可输入多选下拉组合框”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用jQuery实现可输入多选下拉组合框...
    99+
    2022-10-19
  • 如何选择最适合你的数据类型框架?
    随着数据科学的发展,数据类型框架成为了一个非常重要的话题。不同的数据类型框架适用于不同的数据类型和应用场景。因此,选择最适合你的数据类型框架是非常重要的。在本文中,我们将介绍一些最流行的数据类型框架,以及如何选择最适合你的数据类型框架。 ...
    99+
    2023-07-03
    数据类型 npm 框架
  • 如何选择最适合你的Python打包数组框架?
    Python是一种灵活且易于学习的编程语言,越来越多的开发者选择使用Python来开发应用程序。在Python开发中,打包数组框架是一个非常重要的工具,它可以帮助开发者更高效地处理和管理数据。但是,由于Python的开放性和灵活性,有很多不...
    99+
    2023-11-03
    打包 数组 框架
  • 如何在 Python 数组和 JavaScript 框架之间做出选择?
    在当今数字化的世界中,Python 数组和 JavaScript 框架都是非常受欢迎的技术。Python 数组是一种类似于列表的数据结构,而 JavaScript 框架则是一种用于构建动态网页的技术。对于那些想要在 Python 数组和 J...
    99+
    2023-10-28
    数组 javascript 框架
  • Python 数组和 JavaScript 框架:如何选择适合自己的?
    随着计算机科学的发展,人们对于各种编程语言和框架的需求也越来越多样化。Python 和 JavaScript 是两种非常流行的编程语言,它们分别拥有自己的数组和框架。但如何选择适合自己的呢? Python 数组 Python 是一种高级编...
    99+
    2023-10-28
    数组 javascript 框架
  • 如何在 Java 框架中选择正确的数据类型?
    随着 Java 应用程序的不断发展,数据类型的选择变得越来越重要。选择正确的数据类型对于程序的性能和可维护性至关重要。在本文中,我们将探讨如何在 Java 框架中选择正确的数据类型。 Java 中的数据类型可以分为两种:基本数据类型和引用数...
    99+
    2023-10-13
    框架 数据类型 接口
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作