`

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

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


<!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>

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

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

相关推荐

    多选框功能并除去最后一个逗号

    在设计用户界面时，特别是在Web开发和移动应用开发中，多选框是一个不可或缺的部分。本篇文章将深入探讨多选框的功能、用途，以及如何处理最后的逗号问题。 首先，多选框的主要功能是为用户提供多选交互，用户可以...

    jquery复选框全选操作

    然后，在页面中添加一个全选/全不选的复选框，我们可以给它一个特定的ID，如`select-all`： ```html &lt;input type="checkbox" id="select-all"&gt; 全选 ``` 接下来是jQuery代码部分，我们监听`#select-all`复选框的`...

    ireport制作复选框的办法

    iReport 制作复选框的方法可以满足用户在多选项时的需求，帮助用户快速选择多个选项。这种方法可以广泛应用于报表设计、数据分析和商业智能等领域。 标签解释 iReport、复选框、制作和应用是标签中的关键词。...

    javascript复选框实现批量选择

    2. 在列表下方放置一个“全选/全不选”复选框，当选中“全选/全不选”复选框后，列表中的所有复选框都选中，当取消“全选/全不选”复选框后，列表中的所有复选框都取消选中。 3. 当列表中的复选框都取消选中后，...

    简单复选框样式

    在网页设计中，复选框（Checkbox）是一种常见的表单元素，用于让用户在多个选项中进行选择。然而，原生的HTML复选框样式通常较为单一，无法满足设计师们追求个性化和美观的需求。"简单复选框样式"这个主题正是为了...

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

    在微信小程序中，实现多选框（Checkbox）功能是常见的需求，这通常用于用户可以选择多个选项的场景。本文将详细讲解如何通过实例代码来创建一个可选中的多选框列表。 首先，我们需要在WXML（微信小程序的结构层语言...

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

    这些文件共同构成了一个简单的jQuery应用，用于实现弹出框内的多选复选框功能。 首先，`index.html`是网页的主文件，它包含了页面结构和内容。在HTML中，我们会看到一个触发弹出框的按钮和一些隐藏的元素，比如用于...

    js翻页复选框状态保存

    3. **使用服务器端存储**：如果需要在多个会话间共享复选框的状态，可以考虑将状态保存在服务器端，每次页面加载时从服务器获取这些状态信息。 #### 具体实现步骤 1. **添加存储逻辑**：在每个复选框的状态发生...

    form表单复选框取值

    总结，这个示例展示了如何在前端使用JS获取复选框选中的值，通过AJAX发送到后台，由Java处理并返回结果，再在前端更新显示。这是一个典型的CRUD操作的一部分，尤其适用于多选删除场景。理解这个过程对于构建动态、...

    选中一级复选框，相关二级或父级同时被选，取消也是

    多级复选框联动是前端开发中一个常见但又相对复杂的任务，涉及到DOM操作、事件监听、递归算法等多个方面。通过合理的设计和编码，可以有效地提升用户体验和应用的功能性。在实际项目中，还应结合具体需求和环境因素...

    JS实现选中一级复选框相关二级或父级同时被选

    在网页设计和开发中，复选框（Checkbox）是一种常见的用户界面元素，用于让用户可以选择一个或多个选项。在实现复杂的权限管理或者数据筛选功能时，复选框的联动效果尤为重要。"JS实现选中一级复选框相关二级或父级...

    表单checkbox多选框选择特效

    在网页设计中，表单是收集用户数据的重要手段，而多选框（checkbox）则是表单元素中不可或缺的一部分。在“表单checkbox多选框选择特效”中，我们主要探讨的是如何利用CSS3来增强多选框的视觉效果，使其在用户交互时...

    小程序实现多选框功能

    在微信小程序开发中，实现多选框功能是一个常见的需求，用于让用户可以选择多个选项。在本文中，我们将介绍小程序实现多选框的方法，这包括了单选、全选、多选以及删除操作的实现。对于小程序开发者来说，理解和掌握...

    Jquery多选框互相内容交换的实例代码

    本示例提供了四组按钮操作：将选中的项从左边多选框添加到右边的多选框、将所有项从左边添加到右边、将选中的项从右边退回左边、将所有项从右边全部退回左边。这些操作通过以下jQuery代码实现： ```javascript $...

    gridview添加复选框批量操作代码

    这是因为ASP.NET生成的客户端ID可能与服务器端ID不同，所以我们不能直接通过ID获取元素，而是通过遍历所有元素来找到我们需要的复选框。 3. **后端处理批量操作**： 当用户点击删除按钮时，事件处理程序`_Del_...

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

    标题提到的"jquery 复选框 选择三个后不可再选写法"是指在网页中，当用户选择达到三个复选框后，禁止他们继续选择其他复选框。这种功能在多种场景下都非常实用，比如在在线调查、问卷或购物促销活动中，限制用户最多...

    动态获取复选框checkbox选中个数的jquery代码[总结].pdf

    复选框常用于让用户选择多个选项，而实时获取选中状态的数量可以帮助开发者了解用户的实时选择。本文将深入探讨如何使用jQuery来动态获取复选框选中的个数。 jQuery 是一个强大的JavaScript库，它提供了简洁的API来...

    bootstrap-multiselect下拉多选框

    例如，如果你想在运行时动态改变多选框的配置，可以先`destroy`再重新`multiselect`： ```javascript // 销毁多选框 $('#example-get-selected-values').multiselect('destroy'); // 重新初始化，使用新的配置 $('...

    java通过复选框控件数组实现添加多个复选框控件示例分享

    在Java编程中，创建用户界面时，我们经常需要使用各种控件来收集用户输入，其中复选框（JCheckBox）是常见的交互元素之一，用于让用户从多个选项中选择多个喜好或同意某项条款。本示例讲解如何通过复选框控件数组...

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