先写html：
<body>
<form action="">
Name:       <input type="text" /><br/>
Password: <input type="password" /><br/>
<input id="chb" name="chb" type="checkbox" /><label for="chb">我同意本网站的使用条款</label><br/>
<input type="submit" value="提交注册信息" />
</form>
</body>
静态效果展示
注册界面一般是必须同意使用条款才能点击提交，由以下js代码实现
$(function(){
// 1. 找到checkbox空间元素
var $chb = $(':checkbox');
// 2. 拿到除了CheckBox以外的其他元素
var $others = $(':input:not(:checkbox)');
// 3. 为CheckBox绑定单击事件
$chb.click(function(){
// 4. 根据checkbox的情况设定其他这些元素的情况
$others.prop('disabled',!$(this).prop('checked'));
});
});
整体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单联动</title>
<script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<form action="">
Name:       <input type="text" disabled/><br/>
Password: <input type="password" disabled/><br/>
<input id="chb" name="chb" type="checkbox" /><label for="chb">我同意本网站的使用条款</label><br/>
<input type="submit" value="提交注册信息" disabled/>
</form>
<script tpye="text/javascript">
$(function(){
// 1. 找到checkbox空间元素
var $chb = $(':checkbox');
// 2. 拿到除了CheckBox以外的其他元素
var $others = $(':input:not(:checkbox)');
// 3. 为CheckBox绑定单击事件
$chb.click(function(){
// 4. 根据checkbox的情况设定其他这些元素的情况
$others.prop('disabled',!$(this).prop('checked'));
});
});
</script>
</body>
</html>
网友评论