checkbox遍历与禁用

HTML代码如下：

<div>    
     <input type="checkbox" name="ckb" value="1" />1    
     <input type="checkbox" name="ckb" value="2" />2    
     <input type="checkbox" name="ckb" value="3" />3    
     <input type="checkbox" name="ckb" value="4" />4    
     <input type="checkbox" name="ckb" value="5" />5    
     <input type="checkbox" name="ckb" value="6" />6    
     <input type="checkbox" name="ckb" value="7" />7    
     <input type="checkbox" name="ckb" value="8" />8    
     <input type="checkbox" name="ckb" value="9" />9    
     <input type="checkbox" name="ckb" value="10" />10   
</div>

JS代码：

//当复选框选中超过六个时，其余未选中的复选框被禁用
var num = 0;
$(":checkbox").each(function(){
  if(this.checked == true){
      num++;
  }
});
if(num >= 6){
  $(":checkbox").each(function(){ //each遍历
      if(this.checked == false){
          $(this).attr("disabled", "disabled"); //禁用
      }
  });
}else if(num < 6){
  $(":checkbox").each(function(){
      if(this.checked == false){
          $(this).removeAttr("disabled"); //解除禁用
      }
  });
}

了解：

checked

定义和用法

checked 属性设置或返回 checkbox 是否应被选中。

语法

checkboxObject.checked=true|false

说明

该属性保存了 checkbox 的当前状态，不管何时，这个值发生变化的时候，onclick 事件句柄就会触发（也可能触发 onchange 事件句柄）。

实例

下面的例子可设置该 checkbox 的状态：

<html>
<head>
<script type="text/javascript">
function check()
  {
  document.getElementById("check1").checked=true
  }
function uncheck()
  {
  document.getElementById("check1").checked=false
  }
</script>
</head>
<body>

<form>
<input type="checkbox" id="check1" />
<input type="button" onclick="check()" value="Check Checkbox" />
<input type="button" onclick="uncheck()" value="Uncheck Checkbox" />
</form>

</body>
</html>

disabled

定义和用法

disabled 属性可设置或返回是否禁用 checkbox。

语法

checkboxObject.disabled=true|false

实例

下面的例子禁用了该 checkbox：

<html>
<head>
<script type="text/javascript">
function disable()
  {
  document.getElementById("check1").disabled=true
  }
</script>
</head>
<body>

<form>
<input type="checkbox" id="check1" />
<input type="button" onclick="disable()" value="Disable Checkbox" />
</form>

</body>
</html>

checkbox遍历与禁用

checked

定义和用法

语法

说明

实例

disabled

定义和用法

语法

实例

猜你喜欢