如何启用/在自举中选择一个选项列表项后禁止使用下拉字段

Question

`

<div class="form-group"> 
 
            <label class="col-sm-2 control-label">Category</label> 
 
            <div class="col-sm-6"> 
 
             <select class="form-control m-bot15"> 
 
\t \t \t \t \t \t \t \t \t \t \t <option>All Students</option> 
 
              <option>Faculty</option> 
 
              <option>Department</option> 
 
              <option>Program</option> 
 
\t \t \t \t \t \t \t \t \t \t </select> 
 
            </div> 
 
           </div> 
 
\t \t \t \t \t \t \t \t <div class="form-group"> 
 
            
 
\t \t \t \t \t \t \t \t \t <div class="col-sm-4"> 
 
             <select class="form-control m-bot15"> 
 
              <option>Faculty of Science</option> 
 
              <option>Faculty of Arts</option> 
 
              <option>Faculty of Management</option> 
 
\t \t \t \t \t \t \t \t \t \t </select> 
 
            </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-sm-4"> 
 
             <select class="form-control m-bot15"> 
 
              <option>Department of mathematics</option> 
 
              <option>Department of Statistics</option> 
 
              <option>Department of Biology</option> 
 
\t \t \t \t \t \t \t \t \t \t </select> 
 
            </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-sm-4"> 
 
             <select class="form-control m-bot15"> 
 
              <option>Architecture Program</option> 
 
              <option>Computer science Program</option> 
 
              <option>Chemical Engineering Program</option> 
 
\t \t \t \t \t \t \t \t \t \t </select> 
 
            </div> 
 
           </div> \t \t

`我如何启用/禁用表单项的引导（下拉菜单）场用Javascript选择另一个表单项（下拉1）后。 这里是我的表单项的照片Image

Answer 1

我创建例如片断试试这个，它可以帮助你

$(document).ready(function() { 
 
$("#selectTwo").attr("disabled", "disabled"); 
 
$("#selectThree").attr("disabled", "disabled"); 
 
$('#selectOne').on('change', function() { 
 
if(this.value == "1") 
 
{ 
 
$("#selectTwo").removeAttr("disabled"); 
 
$("#selectThree").attr("disabled", "disabled"); 
 
} 
 
else if(this.value == "2") 
 
{ 
 
$("#selectThree").removeAttr("disabled"); 
 
$("#selectTwo").attr("disabled", "disabled"); 
 
} 
 
else if(this.value == "3") 
 
{ 
 
$("#selectThree").removeAttr("disabled"); 
 
$("#selectTwo").removeAttr("disabled"); 
 
} 
 
}); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<select id="selectOne" class="form-control"> 
 
<option value='0'>Select</option> 
 
<option value='1'>Enable One</option> 
 
<option value='2'>Enable Two</option> 
 
<option value='3'>Enable All</option> 
 
</select> 
 

 

 
<select id="selectTwo" class="form-control" > 
 
<option >Select</option> 
 
<option >One</option> 
 
<option >Two</option></select> 
 

 
<select id="selectThree" class="form-control" > 
 
<option >Select</option> 
 
<option >One</option> 
 
<option >Two</option></select>