根据下拉菜单中的选定值启用/禁用表单中元素的最佳方法？

Question

我有访问级别字段的形式。 根据选定的值，将在表单上启用更多字段。 这是我的表格示例：

 $('#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则仅应启用Region下拉菜单；如果选择了Level 3 ，则应启用Region和State。 最后是Level 4然后应启用Region，State和City。 在各个级别之间来回切换，我想启用/禁用“地区/州/城市”输入字段。 什么是最有效的解决方案？

Answer 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> 

Answer 2

您应该尝试这样的事情：

$('#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/