Checkbox traversal and disable

The HTML code is as follows:

<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 code:

// When more than six checkboxes are checked, the remaining unchecked checkboxes are disabled 
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" ); //Remove disabled
      }
  });
}

To understanding:

checked

Definition and Usage

The checked property sets or returns whether the checkbox should be checked.

grammar

checkboxObject.checked=true|false

illustrate

This property holds the current state of the checkbox, and whenever this value changes, the onclick event handler will fire (and possibly the onchange event handler).

example

The following example sets the state of the 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

Definition and Usage

The disabled property sets or returns whether the checkbox is disabled.

grammar

checkboxObject.disabled=true|false

example

The following example disables this 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 traversal and disable

checked

Definition and Usage

grammar

illustrate

example

disabled

Definition and Usage

grammar

example

Guess you like