我的表单包含访问级别字段。根据选定的值，将在表单上启用更多字段。以下是我的表格示例：
$('#frm_accesslevel').on('change',accessLevel);
function accessLevel() {
var fldVal = $(this).val();
switch(fldVal){
case '1':
break;
case '2':
break;
case '3':
break;
case '4':
break;
default:
}
}<!---*** Start: JQuery 3.3.1 version and chosen files. ***--->
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="Chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="Chosen/chosen.min.css">
<!---*** End: JQuery 3.3.1 version and chosen files. ***--->
<!---*** Start: Bootstrap 3.3.7 version files. ***--->
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript" src="Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!---*** End: Bootstrap 3.3.7 version files. ***--->
<form name="frmSave" id="frmSave>
<div class=" form-group ">
<label class="control-label " for="accessl "><span class="label label-primary ">Access Level:</span></label>
<select class="form-control " name="frm_accesslevel " id="frm_accesslevel " required>
<option value=" ">--Choose Level--</option>
<option value="1 ">Level 1</option>S
<option value="2 ">Level 2</option>
<option value="3 ">Level 3</option>
<option value="4 ">Level 4</option>
</select>
</div>
<div class="form-group required ">
<label class="control-label " for="region "><span class="label label-primary ">Region</span></label>
<select class="form-control " name="frm_region " id="frm_region " required disabled></select>
</div>
<div class="form-group ">
<label class="control-label " for="state "><span class="label label-primary ">State:</span></label>
<select class="form-control " name="frm_state " id="frm_state " required disabled></select>
</div>
<div class="form-group ">
<label class="control-label " for="city "><span class="label label-primary ">City:</span></label>
<select class="form-control " name="frm_city " id="frm_city " required disabled></select>
</div>
<div class="row ">
<div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1 ">
<button type="submit " class="btn btn-primary ">Submit</button>
</div>
</div>
</form>
我想知道如何实现下一步，如果用户选择Level 1那么禁用字段都不会改变状态。如果选择了Level 2，则只应启用“区域”下拉菜单，如果选择了Level 3，则应启用“区域”和“状态”。最后一个是Level 4，然后应该启用地区，州和城市。在我想要启用/禁用区域/州/城市输入字段的级别之间来回切换。什么是最有效的解决方案？
答案 0 :(得分：1)
这个怎么样？ 如果有超过3个选择，那么你可以遍历一个选择名称的数组，以避免重复.hasClass部分。
$("#frm_accesslevel").change(function() {
var selected = $("#frm_accesslevel option:selected");
$('.enabler').each(function(){
$(this).prop("disabled", true);
});
if(selected.hasClass('region')){
$('#frm_region').prop("disabled", false);
}
if(selected.hasClass('state')){
$('#frm_state').prop("disabled", false);
}
if(selected.hasClass('city')){
$('#frm_city').prop("disabled", false);
}
});<!---*** Start: JQuery 3.3.1 version and chosen files. ***--->
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="Chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="Chosen/chosen.min.css">
<!---*** End: JQuery 3.3.1 version and chosen files. ***--->
<!---*** Start: Bootstrap 3.3.7 version files. ***--->
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript" src="Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!---*** End: Bootstrap 3.3.7 version files. ***--->
<form name="frmSave" id="frmSave">
<div class=" form-group">
<label class="control-label" for="accessl"><span class="label label-primary">Access Level:</span></label>
<select class="form-control" name="frm_accesslevel" id="frm_accesslevel" required>
<option value="">--Choose Level--</option>
<option value="1">Level 1</option>S
<option value="2" class="region">Level 2</option>
<option value="3" class="region state">Level 3</option>
<option value="4" class="region state city">Level 4</option>
</select>
</div>
<div class="form-group required">
<label class="control-label" for="region"><span class="label label-primary">Region</span></label>
<select class="form-control enabler" name="frm_region" id="frm_region" required disabled></select>
</div>
<div class="form-group ">
<label class="control-label" for="state"><span class="label label-primary ">State:</span></label>
<select class="form-control enabler" name="frm_state" id="frm_state" required disabled></select>
</div>
<div class="form-group">
<label class="control-label" for="city "><span class="label label-primary ">City:</span></label>
<select class="form-control enabler" name="frm_city" id="frm_city" required disabled></select>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
答案 1 :(得分：0)
你应该尝试这样的事情：
$('#frm_accesslevel').on('change', function(){
var fldVal = $(this).val(); // you have access to this here, not outside
switch(+fldVal) {//cast as number with +
case 1:
alert("nothing happen");
break;
case 2:
$(".form-control").hide();//hide all
$("#frm_region").show();
$("#frm_accesslevel").show();
break;
case 3:
alert("behavior");
$(".form-control").show();//show all
break;
case 4:
alert("other behavior");
$(".form-control").show();//show all
break;
default:
alert("somethig wrong");
}
});
请记住，你在html中有错误，有些“遗失了，你在id的属性中有空格。
这是一个简单而实用的示例https://jsfiddle.net/k2nuq3h3/5/