`

多选框选到一定个数不能再选

 
阅读更多
三种方式（三种有没有重复忘记了，但是都能用，其中第三种 跟前两种不一样） 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<title>控制多选框可选中的个数 达到限制后其他变为不可选 | 小鹿站长站 DeerOL.com</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
	您觉得站长特效网的哪些内容最有特色（最多可以选择2项）：<br>
	<!--以下每条中onclick="checkbox_max(this,2);"里面的数字2为最多可以选择的项数，以下每条必须统一为同一数字-->
	<input type="checkbox" name="o[4][1]" value="1" id="o[4]" onclick="checkbox_max(this,2);">js特效代码<br>
	<input type="checkbox" name="o[4][2]" value="1" id="o[4]" onclick="checkbox_max(this,2);">广告代码<br>
	<input type="checkbox" name="o[4][3]" value="1" id="o[4]" onclick="checkbox_max(this,2);">站长特效<br>
	<input type="checkbox" name="o[4][4]" value="1" id="o[4]" onclick="checkbox_max(this,2);">在线生成<br>
	<input type="checkbox" name="o[4][5]" value="1" id="o[4]" onclick="checkbox_max(this,2);">网页特效<br>
</form>

<script type="text/javascript">
function checkbox_max(obj,max_num) {
   var form1 = document.getElementById('form1');
   var this_name_array = document.getElementsByName(obj.id);
   /*IE ok \ FF ok*/
   //var name1 = document.getElementsByName(obj.id+"[1]");
   var auto_num = 1;
   var element_length = 0 ;
   while(document.getElementsByName(obj.id+"["+ auto_num +"]").length > 0) {
    document.getElementsByName(obj.id+"["+ auto_num +"]")[0].disabled = "";
    if(document.getElementsByName(obj.id+"["+ auto_num +"]")[0].checked) {
     element_length++;
    }
    auto_num++;
   }
   var auto_num = 1;
   if(element_length >= max_num) {
    while(document.getElementsByName(obj.id+"["+ auto_num +"]").length > 0) {
     if(!document.getElementsByName(obj.id+"["+ auto_num +"]")[0].checked) {
      document.getElementsByName(obj.id+"["+ auto_num +"]")[0].disabled = "disabled";
     }
    auto_num++;
    }
   }
   if(element_length > max_num) {
    obj.checked = false;
    var auto_num = 1;
    alert("最多只能选择"+ max_num +"项！");
   }
   /*IE ok \ FF ok end*/
   /*IE ok \ FF no
   if(this_name_array.length > max_num) {
    var check_num = 0;
    for(var i=0; i<this_name_array.length; i++) {
     if(this_name_array[i].checked) {
      check_num++;
     }
    }
    if(check_num > 3) {
     obj.checked = false;
     alert("最多只能选择"+ max_num +"项！");
    }
   }
   */
}
</script>
<p align="center" style="width:100%;padding-top:50px"><strong>控制多选框中 可以选中的个数 达到限制选择数量后其他选项变为不可选的代码 限制数量可以调整<strong><br><br> 
小鹿站长站 - Z.DeerOL.com <a href="http://z.deerol.com/js"><b>更多 网页特效</b></a></p>
</body>
</html>

/////////////====================================================================================================
第二种 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 控制多选框选中个数效果三 站长特效网</title>
<script type="text/javascript">
function $(id) {
 return document.getElementById(id);
}//欢迎来到站长特效网，我们的网址是www.zzjs.n et，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
var max_obj = 3;//最多可以选择三项
var p = 0;
function checkbox(obj) {
 if(obj.checked) {
  p++;
  for (var i = 0; i < $('poll').elements.length; i++) {
   var e = $('poll').elements[i];
   if(p == max_obj) {
    if(e.name.match('pollanswers') && !e.checked) {
     e.disabled = true;
    }
   }
  }
 } else {
  p--;
  for (var i = 0; i < $('poll').elements.length; i++) {
   var e = $('poll').elements[i];
   if(e.name.match('pollanswers') && e.disabled) {
    e.disabled = false;
   }
  }
 }
 $('pollsubmit').disabled = p <= max_obj && p > 0 ? false : true;
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>
<!--欢迎来到站长特效网，我们网站收集大量高质量js特效，提供许多广告代码下载，网址：www.zzjs.net，zzjs@msn.com,用.net打造靓站-->
<form id="poll" name="poll" method="post" action="">
您觉得站长特效网这个网站的哪些内容最有特色（最多可以选择三项）：<br>
<input class="checkbox" type="checkbox" id="option_0" name="pollanswers[]" value="1" onclick="checkbox(this)">js特效代码<br>
<input class="checkbox" type="checkbox" id="option_1" name="pollanswers[]" value="2" onclick="checkbox(this)">广告代码<br>
<input class="checkbox" type="checkbox" id="option_2" name="pollanswers[]" value="3" onclick="checkbox(this)">zzjs.net<br>
<input class="checkbox" type="checkbox" id="option_3" name="pollanswers[]" value="4" onclick="checkbox(this)">站长特效<br>
<input class="checkbox" type="checkbox" id="option_4" name="pollanswers[]" value="5" onclick="checkbox(this)">网页特效<br>
<button class="submit" type="submit" disabled="disabled" name="pollsubmit" id="pollsubmit" value="true">提交</button>
</form>
</body>
</html>


//========================================================================================================
第三种 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery checkbox 选中 取消 checkbox多选框点击事件控制显示隐藏</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>
</head>

<body>
<style type="text/css">
*{margin:0;margin:0;list-style-type:none;}
a,img{border:0;}
img{vertical-align:middle;}
label{cursor:pointer;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:normal;font-weight:normal}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button,textarea,select{*font-size:100%}
body{font:12px/180% Arial,"宋体";color:#333;}

.formbox{width:400px;border:solid 1px #ddd;padding:10px 20px 20px 20px;margin:0 auto;}
.findfive{height:20px;overflow:hidden;padding:5px 0 0 20px;}
/* findform */
#findform{padding:0 0 0 20px;}
#findform li .inputext{width:360px;height:20px;line-height:20px;padding:0 0 0 3px;background:url(images/inputbg.png) no-repeat;border:solid 1px #c6c6c6;}
#findform li .inputext input{border:none;font-family:Arial;background:none;width:97%;margin:3px 0 0 0;}
#findform li .grayinput{background:url(images/inputgraybg.png) no-repeat;}
</style>

<div class="formbox">
	<div class="findfive"><input type="checkbox" name="" id="five" /> <label for="five">点击填写内容信息</label></div>
	<ul id="findform" class="clearfix">
		<li><span class="f-l">姓名：</span><div class="f-l inputext grayinput"><input type="text" name="" value="" id="" disabled="disabled" /></div></li>
		<li><span class="f-l">身份证号：</span><div class="f-l inputext grayinput"><input type="text" name="" value="" id="" disabled="disabled" /></div></li>
		<li><span class="f-l">手机（选填）：</span><div class="f-l inputext grayinput"><input type="text" name="" value="" id="" disabled="disabled" /></div></li>
	</ul>
</div><!--formbox end-->

<script type="text/javascript">
$(document).ready(function(){
	$("#five").click(function(){
		if($(this).attr("checked")){
			$("#findform li input").removeAttr("disabled","");
			$("#findform li .inputext").removeClass("grayinput");
		}else{
			$("#findform li input").attr("disabled","disabled");
			$("#findform li .inputext").addClass("grayinput");
		}
	})
});
</script>
</body>
</html>

分享到：
| 鼠标点击事件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    下拉多选框（使用popupwindow实现）

    这个主要是通过popupwindow实现下拉弹窗，再辅以判断逻辑实现多选（PS:习惯性的把项目中实现的小东西整理下）

    jQuery弹出框checkbox复选框多选代码.zip

    jQuery弹出框checkbox复选框多选代码，jQuery弹出框checkbox复选框多选代码

    微信小程序实现多选框功能的实例代码

    主要介绍了微信小程序实现多选框功能及效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

    javascript复选框实现批量选择

    程序员在开发的时候，经常会遇到对查询列表中的记录进行批量操作的情况，实现倒是也不难，用javascript就行，但每次都要重新再写一遍，本人在工作中把它总结为一个模块，记录下来，以便再用。

    微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能

    2.在选中的同时获取需要的商品id，获取后是以字符串拼接的形式 拼成一个字符串 3.点击删除按钮时删除选中的商品 点击全选 再次点击全选框 wxml关键代码 重要代码 value={{item.goods_id}} --&gt;checkbox被选中的...

    JavaScript判断表单中多选框checkbox选中个数的方法

    这里使用JavaScript检测并判断出表单中多选框的选中个数，也就是checkbox被选择了多少，在以前，这个问题经常被各大论坛问到，因为检测checkbox不像检测输入框那么简单，尤其是判断个数也经常会遇到，所以说觉得这个...

    ExtJS 下拉多选框lovcombo

    开始以为很简单，在option里加个input... 下拉多选框的使用过程中处理比较多的逻辑主要集中在数据源store的配置和select事件的处理。extjs本身的那种数据和UI分离的模式使得级联的实现非常轻松。只需在省份下拉框的sele

    vue实现的树形结构加多选框示例

    主要介绍了vue实现的树形结构加多选框,结合实例形式分析了在之前递归组件实现vue树形结构的基础之上再加上多选框功能相关操作技巧,需要的朋友可以参考下

    javascript关于复选框的实用脚本代码

    在很多网站里这都是一个很常见的效果，就是点击总分类的复选框，自动选择所有子分类的复选框，或者如果子分类的所有复选框全部被选中则总分类复选框也自动被选中。 这次偶时再msn的网站上偶然看到的，于是自己也试着...

    js实现复选框的全选和取消全选效果

    在很多网站都有这样的功能，当点击一个全选按钮之后，所有的复选框都会被选中，再点击之后会取消全选，功能非常的人性化，可以省却很多人力，本文将简单介绍一下JS如何实现此功能

    使用CSS实现页面复选框的方法

     选项很多，没有规律，找起来很累 如果是一个已经选择了部分选项的广告，修改时仍然需要用肉眼寻找，无法一眼看出来投放到哪些省份 选完一个，再选下一个，还要从头找，甚至会被已经选过的影响 于是我想，首先...

    Bootstrap Table中的多选框删除功能

    先上代码，后面再进行详细解释： //删除按钮事件 $("#remove").on("click", function () { // $("#table").bootstrapTable('getSelections');为bootstrapTable自带的，所以说一定要使用bootstrapTable显示表格,#...

    一览画面点击复选框后获取多个id值的方法

    在web开发中经常会遇到一览画面中每一条记录前都带一个复选框，点击后选中该条记录进行删除、修改、查看等操作。 修改和查看都是获取一条记录的id值后传递到后台进行查询获取该记录对象的各种属性值，再显示到画面上...

    按编辑框弹出自定义键盘

    按编辑框，弹出自定义的数字键盘，用消息拦截的方法实现，可以用到每个窗口是的多个编辑框，此程序和上一个是有区别的，本程序是数字键盘上有一个编辑框，编辑的数据不能直接显示到主窗口的编辑框中，只能选显示到...

    下拉框的选项中添加搜索框

    下拉框中的选项太多需要一个搜索功能的输入框，检索出需要的选项选择，这个插件就是在下拉选中中的第一个选项的前面添加一个搜索框，搜索需要的选项！

    layui table 复选框跳页后再回来保持原来选中的状态示例

    今天小编就为大家分享一篇layui table 复选框跳页后再回来保持原来选中的状态示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

    给 TTreeView 添加复选框

    2.保证无毒 3.简单,方便,实用 4.实例可以自行改用 5.如有非法,本人无法律责任,由改动代码人负责！ 6.需要更多本人作品,查找标签“朱建强” 7.请下载,杀毒后再使用！

    CAD图批量打印(可打印倾斜图框)程序

    4、光栅图像应用的目的：能隐藏内图框不需要打印的内容，上述线型应为多段线，用户应根据自己的需要和用户图框特征，将此光栅图像与用户图框一起制作图框块。 5、在制作含光栅图像的图框块时，需要注意，先将光栅...

Magicbox
Global site tag (gtag.js) - Google Analytics