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

最新推荐文章于 2023-06-29 14:08:16 发布

Time，，

最新推荐文章于 2023-06-29 14:08:16 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/kaka_2014/article/details/8940750

版权

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



<!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>
	<!--以下每条中οnclick="checkbox_max(this,2);"里面的数字2为最多可以选择的项数，以下每条必须统一为同一数字-->
	<input type="checkbox" name="o[4][1]" value="1" id="o[4]" οnclick="checkbox_max(this,2);">js特效代码<br>
	<input type="checkbox" name="o[4][2]" value="1" id="o[4]" οnclick="checkbox_max(this,2);">广告代码<br>
	<input type="checkbox" name="o[4][3]" value="1" id="o[4]" οnclick="checkbox_max(this,2);">站长特效<br>
	<input type="checkbox" name="o[4][4]" value="1" id="o[4]" οnclick="checkbox_max(this,2);">在线生成<br>
	<input type="checkbox" name="o[4][5]" value="1" id="o[4]" οnclick="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" οnclick="checkbox(this)">js特效代码<br>
<input class="checkbox" type="checkbox" id="option_1" name="pollanswers[]" value="2" οnclick="checkbox(this)">广告代码<br>
<input class="checkbox" type="checkbox" id="option_2" name="pollanswers[]" value="3" οnclick="checkbox(this)">zzjs.net<br>
<input class="checkbox" type="checkbox" id="option_3" name="pollanswers[]" value="4" οnclick="checkbox(this)">站长特效<br>
<input class="checkbox" type="checkbox" id="option_4" name="pollanswers[]" value="5" οnclick="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>

checkbox.rar (2.4 KB)
下载次数: 1

Time，，

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
多选框选到一定个数不能再选

三种方式（三种有没有重复忘记了，但是都能用，其中第三种跟前两种不一样）控制多选框可选中的个数达到限制后其他变为不可选 | 小鹿站长站 DeerOL.com 您觉得站长特效网的哪些内容最有特色（最多可以选择2项）： js特效代码广告代码站长特效在线生成网页特效function checkbox_ma
复制链接

扫一扫