表单可用性测试-优快云博客

本文链接：https://blog.youkuaiyun.com/lidengw08/article/details/6741002

<!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>表单是否可用测试</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<script type="text/javascript">
$(function(){
	//alert('tests');
	//alert($("#t1").attr("disabled"));//结果为undefined
	//alert($("#t2").attr("disabled"));//结果为true
	//所以判断表单是否可用的方法是
	/*
	if($("#id").attr("disabled")){}//判断不可用 
    if($("#id").attr("disabled")==undefined){}//判断可用 
	*/
	/*设置元素是否可用
	$("#id").attr("disabled",false);//设为可用 
    $("#id").attr("disabled",true);//设为不可用
	
	*/
	
	/*点击 按钮， 让第一级复选框在可用和不可用之间切换*/
	$("#button").click(function(){
		if($("#category1").attr("disabled")){
			//alert('不可用');
		$("#category1").attr("disabled", false);
		$("[name=category1]").attr("disabled", false);
		
		}
		else{
			//alert('可用');
			$("#category1").attr("disabled", true);
			//此时， 让下级复选框都不可用
			$("[name=category1]").attr("disabled", true);
			}
		});
	 
	
	
	
	});

</script>

</head>

<body>
<p>案例：判断上级复选框是否可用， 如果上级不可用， 则将下级所有复选框设为不可用， 如果上级可用， 将下级所有复选框置为可用</p>
<p>
  <input type="checkbox" name="checkbox" id="category1" />
</p>
<p>
  	-----
  	<input type="checkbox" name="category1" id="checkbox2" />
</p>
<p>
  -----
  <input type="checkbox" name="category1" id="checkbox3" />
</p>
<p>
  -----
  <input type="checkbox" name="category1" id="checkbox4" />
</p>
<p>
  -----
  <input type="checkbox" name="category1" id="checkbox5" />
</p>
<p>
  -----
  <input type="checkbox" name="category1" id="checkbox6" />
</p>
<p>
  -----
  <input type="checkbox" name="category1" id="checkbox7" />
</p>
<p>
  <input type="submit" name="button" id="button" value="提交" />
</p>
</body>
</html>

案例：判断上级复选框是否可用，如果上级不可用，则将下级所有复选框设为不可用，如果上级可用，将下级所有复选框置为可用