需求：點擊選擇老師時，老師與課程是切換的，
選擇老師，選擇楊過時，禁止操作身法技能下拉框、年級號。課程號，允許選擇內功心法，
選擇課程時，禁止選擇兩個老師，禁止選擇身法技能允許內功心法下拉框，班級號、課程號輸入框操作
樣式如下圖：
代碼：
HTML部分：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>單選按鈕組的操作</title>
</head>
<body>
<form method="" action="">
<div style="padding-left: 200px">
<div class="radio">
<label>
<input name="teake" type="radio" id="gfsq" value="gf" />
<span class="lbl"> 一、選擇老師</span>
</label>
<p></p>
<label class="">每個老師對應的課程</label>
<div class="radio">
<label>
<input name="teacher" type="radio" class="ace" value="yangguo" id="yg" />
<span class="lbl"> 1、楊過</span>
</label>
</div>
<div class="radio">
<label>
<input name="teacher" type="radio" class="ace" value="wdk" id="zwj"/>
<span class="lbl"> 2、張無忌</span>
</label>
</div>
</div>
<div class="radio">
<label>
<input name="teake" type="radio" id="xfsq" value="xf" />
<span class="lbl">二、選擇課程</span>
</label>
</div>
<div style="padding-left: 20px" id="jzcz">
<label>對應的課程</label>
<div>
<label for="form-field-select-1" name="sfjn">身法技能</label>
<select class="form-control" id="form-field-select-1" style="width:200px;display: inline-block;" name="sfjn" >
<option value="zzszyfp">至高全面身法技能</option>
<option value="zzsptfp"></option>
<option value="AK"></option>
</select>
<label for="form-field-select-1" name="zsfs">內功心法</label>
<select class="form-control" id="form-field-select-1" style="width:200px;display: inline-block;">
<option value="ptzs">乾坤大挪移</option>
<option value="zzsptfp">九陰真經</option>
<option value="AK">九陽神功</option>
</select>
</div>
<div style="padding-top: 10px">
<label name="banji">年級號</label>
<input id="banji" name="" style="width:200px;height: 20px;" />
<label name="kehao">課程號</label>
<input id="kehao" style="width:200px;height: 20px;" />
</div>
</div>
</div>
</form>
</body>
</html>
JavaScript部分：
<script type="text/javascript">
var teake=document.getElementsByName("teake");
var teacher=document.getElementsByName('teacher');
var sfjn=document.getElementById('form-field-select-1');
var banji=document.getElementById('banji');
var kehao=document.getElementById('kehao');
var yg=document.getElementById('yg');
var zwj=document.getElementById('zwj');
for (var i = 0; i < teake.length; i++) {
teake[0].onclick = function(){
yg.disabled=false;
zwj.disabled=false;
for(var i=0; i<teacher.length;i++){
teacher[i].onclick=function(){
if(this.value=="yangguo"){
sfjn.disabled=true;
banji.disabled=true;
kehao.disabled=true;
}else{
banji.disabled=false;
kehao.disabled=false;
sfjn.disabled=true;
}
}
}
}
teake[1].onclick = function(){
initcheck();//初始化 清空選擇
yg.disabled=true;
zwj.disabled=true;
sfjn.disabled=true;
banji.disabled=false;
kehao.disabled=false;
}
}
for(var k=0;k<teacher.length;k++){
teacher[k].onclick=function(){
if (this.value=="yangguo"){
teake[0].checked=true;
sfjn.disabled=true;
banji.disabled=true;
kehao.disabled=true;
}else{
teake[0].checked=true;
banji.disabled=false;
kehao.disabled=false;
sfjn.disabled=true;
}
}
}
//初始化單選按鈕狀態,清空不可選
function initcheck(){
for(var j=0;j<teacher.length;j++){
teacher[j].checked =false;
}
}
</script>