`
xu520
  • 浏览: 83923 次
  • 性别: Icon_minigender_1
  • 来自: 金华
社区版块
存档分类
最新评论

选择指定数量后checkbox不可选(变灰)javascript代码

 
阅读更多

选择3个后可以看到效果

<script> 

function disableCheckBox() { 
var obj=document.getElementsByTagName("input") 
for(var i=0;i<obj.length;i++) 
{ 
if ( !obj[i].checked ) 
obj[i].disabled = true; 
} 
} 
function ableCheckBox() { 
var obj=document.getElementsByTagName("input") 
for(var i=0;i<obj.length;i++) 
obj[i].disabled = false; 
} 

function check() 
{ 
var obj=document.getElementsByTagName("input") 
var sun=0; 

for(var i=0;i<obj.length;i++) 
{ 
if(obj[i].type=="checkbox" && 
obj[i].checked) 
sun++; 

if( sun< 3 ) 
{ 
ableCheckBox(); 
//break; 
} 
else if(sun == 3 ) 
{ 
disableCheckBox(); 
event.srcElement.checked=true; 
break; 
} 
else if(sun > 3 ) 
{ 
event.srcElement.checked=false; 
break; 
} 
} 
} 
</script> 
<input type='checkbox' name='cate[]' 
value='102' onclick="check();">粤菜 <input 
type='checkbox' name='cate[]' value='103' 
onclick="check();">潮州 <input 
type='checkbox' name='cate[]' value='104' 
onclick="check();">客家 <input 
type='checkbox' name='cate[]' value='105' 
onclick="check();">川菜 <input 
type='checkbox' name='cate[]' value='106' 
onclick="check();">上海/江浙 <input 
type='checkbox' name='cate[]' value='107' 
onclick="check();">湖南 <input 
type='checkbox' name='cate[]' value='108' 
onclick="check();">湖北 <input 
type='checkbox' name='cate[]' value='109' 
onclick="check();">贵州 <input 
type='checkbox' name='cate[]' value='110' 
onclick="check();">东北 <input 
type='checkbox' name='cate[]' value='111' 
onclick="check();">江西 <input 
type='checkbox' name='cate[]' value='112' 
onclick="check();">北京 <input 
type='checkbox' name='cate[]' value='113' 
onclick="check();">鲁菜 <input 
type='checkbox' name='cate[]' value='114' 
onclick="check();">台湾 <input 
type='checkbox' name='cate[]' value='115' 
onclick="check();">新疆/清真 <input 
type='checkbox' name='cate[]' value='116' 
onclick="check();">云南 <input 
type='checkbox' name='cate[]' value='117' 
onclick="check();">其他中餐 <input 
type='checkbox' name='cate[]' value='118' 
onclick="check();">野味 <input 
type='checkbox' name='cate[]' value='119' 
onclick="check();">火锅 <input 
type='checkbox' name='cate[]' value='120' 
onclick="check();">海鲜 <input 
type='checkbox' name='cate[]' value='121' 
onclick="check();">比萨 <input 
type='checkbox' name='cate[]' value='122' 
onclick="check();">自助餐 <input 
type='checkbox' name='cate[]' value='123' 
onclick="check();">茶餐厅 <input 
type='checkbox' name='cate[]' value='124' 
onclick="check();">小吃面食 <input 
type='checkbox' name='cate[]' value='125' 
onclick="check();">烧烤 <input 
type='checkbox' name='cate[]' value='126' 
onclick="check();">素菜 <input 
type='checkbox' name='cate[]' value='127' 
onclick="check();">简餐 <input 
type='checkbox' name='cate[]' value='128' 
onclick="check();">快餐 <input 
type='checkbox' name='cate[]' value='129' 
onclick="check();">面包糕点 <input 
type='checkbox' name='cate[]' value='130' 
onclick="check();">甜品 <input 
type='checkbox' name='cate[]' value='131' 
onclick="check();">茶室 <input 
type='checkbox' name='cate[]' value='132' 
onclick="check();">咖啡厅 <input 
type='checkbox' name='cate[]' value='133' 
onclick="check();">酒吧 <input 
type='checkbox' name='cate[]' value='134' 
onclick="check();">日本 <input 
type='checkbox' name='cate[]' value='135' 
onclick="check();">韩国 <input 
type='checkbox' name='cate[]' value='136' 
onclick="check();">东南亚印 <input 
type='checkbox' name='cate[]' value='137' 
onclick="check();">法国 <input 
type='checkbox' name='cate[]' value='138' 
onclick="check();">意大利 <input 
type='checkbox' name='cate[]' value='139' 
onclick="check();">拉美 <input 
type='checkbox' name='cate[]' value='140' 
onclick="check();">无国界 <input 
type='checkbox' name='cate[]' value='141' 
onclick="check();">西餐 <input 
type='checkbox' name='cate[]' value='142' 
onclick="check();">其他西餐 


分享到:
评论

相关推荐

    checkbox.js

    在网页开发中,Checkbox元素是不可或缺的一部分,它允许用户进行多选操作,常用于表单提交或者数据筛选。而`checkbox.js`文件就是专门针对这种元素进行操作的一个JavaScript库,它提供了全选、全不选以及统计选中个...

    jquery 复选框 选择三个后不可在选写法

    本篇文章将详细讲解如何在jQuery中实现一个复选框功能,当用户选择达到三个后,不允许再进行选择,即限制最多只能选中三个复选框。 首先,我们需要在HTML中设置好复选框。每个复选框通常有一个`&lt;input&gt;`标签,类型...

    用js实现复选框多选的js源代码

    在Web开发中,常常需要实现用户对一系列选项进行多选的功能,而为了方便用户的操作体验,通常会提供一个“全选”或“全不选”的按钮来帮助用户快速选择或取消所有选项。本文将通过分析提供的JavaScript源代码,详细...

    程序天下:JavaScript实例自学手册

    6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送...

    《程序天下:JavaScript实例自学手册》光盘源码

    6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送...

    jquery实现checkbox 全选/全不选的通用写法

    在上述代码中,`$(":checkbox[name="+name+"]")`是一个基于属性的选择器,它会找到所有具有指定name属性的复选框。`name`变量是触发全选/全不选操作的复选框的name属性,例如`aAll`或`bAll`。 `chkAll`函数是实现...

    常用的javascript function代码

    ### 常用JavaScript Function知识点解析 #### 一、`mhHover` 函数 **功能说明**:该函数实现了一个简单的鼠标悬停效果,当鼠标悬停在指定表格的特定单元格上时,会改变该单元格的CSS类名。 **参数说明**: - `tbl`...

    js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析.docx

    在网页表单设计中,有时我们需要对用户的选择行为进行限制,比如限制用户最多只能选择一定数量的选项。本文将深入解析如何使用JavaScript(js)来限制用户在复选框(checkbox)中勾选的个数,以及如何在后端使用PHP...

    javascript技巧

    12. **函数定义**:函数是可重用的代码块。定义一个函数的基本语法是: ```javascript function functionName(parameters) { // 函数体 } ``` 13. **表单操作**:可以通过 `document.forms[index]` 来访问表单...

    jQuery实现点击行选中或取消CheckBox的方法

    在网页开发中,jQuery是一个非常常用的JavaScript库,它简化了DOM操作、事件处理以及动画创建。...这个功能通常用于多选列表...在开发过程中,记得时刻关注代码的可维护性和可扩展性,以便在未来的需求变更中能快速适应。

    js函数大全 javascript

    JavaScript,也被称为JS,是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责客户端的交互和动态效果。在JavaScript中,函数是代码的可重用块...了解和掌握这些基础知识对于编写高效的JavaScript代码至关重要。

    javascript函数及说明

    在日常开发中,JavaScript 函数是不可或缺的一部分,它们为开发者提供了强大的功能,用于处理各种任务和实现复杂逻辑。以下是从给定文件中提炼出的关键JavaScript函数和概念,旨在帮助读者深入理解并熟练应用这些...

    bootstrap TreeView全选单选,定位选触发事件实例

    在“bootstrap TreeView全选单选,定位选触发事件实例”中,我们将深入探讨如何实现这个组件的多种选择功能,包括单选、全选以及通过父节点控制子节点的选择,并讨论当选择状态改变时如何触发相关事件。 1. **全选...

    ASP.NET 购物车代码

    ASP.NET购物车代码是用于构建在线电子商务网站的关键组件,它允许用户选择商品并保存到虚拟购物车中,以便后续结账。...这些细节虽然没有在提供的代码片段中展示,但在实际应用中是不可或缺的部分。

    JavaScript实现类似淘宝的购物车效果

    JavaScript实现的购物车功能是电子商务网站中不可或缺的一部分,它提供了用户友好的交互体验。在本文中,我们将探讨如何使用JavaScript来实现类似淘宝购物车的各种功能,包括商品的单选、全选、删除、修改数量以及...

    小程序源码 RadioButtonAndCheckBox.zip

    在小程序开发中,它们是构建用户界面时不可或缺的部分。 Radio Button和CheckBox在用户界面设计中扮演着重要角色。Radio Button用于提供一组互斥选项,用户只能选择其中的一个;而CheckBox则允许用户选择一个或多个...

    JavaScript 表单处理实现代码

    总的来说,JavaScript的表单处理能力强大,不仅可以控制表单的行为,还能进行数据验证、用户交互优化等,是构建动态网页不可或缺的一部分。正确理解和使用这些概念可以极大地提升网页的用户体验。

    十四种不同类型的input字段文字输入效果

    13. **checkbox**:创建复选框,用户可以选择一个或多个选项,适合用于多选题。 14. **radio**:创建单选按钮,用户只能选择其中一个选项,常用于性别选择或等级选择等场景。 每种输入类型都有其特定的用途和验证...

Global site tag (gtag.js) - Google Analytics