根據選擇選項，同時啟用和禁用兩個文本框

Question

當我在選擇選項中選擇“男人”類別時，我有四個類別，即男人，女人，青年和（男人和女人）兩者，當輸入女性人數的文本框被禁用時，當我選擇“女人”類別時，輸入男性人數的文本框被禁用被禁用，我尋求幫助的是當我選擇青年或兩個類別時如何使兩個文本框同時處於活動狀態。 下面是我的代碼。

 <div class="form-group"> <label for="category" class="col-sm-2 control-label">Group Category</label> <div class="col-sm-3"> <select class="form-control" name="category" id="category" onChange="JoinedOrNot()"> <option value="">Select Category</option> <option value="Men">Men</option> <option value="Women">Women</option> <option value="Youth">Youth</option> <option value="Both">Both</option> </select> </div> </div> <div class="form-group"> <label for="name" class="col-sm-2 control-label">Number Of Men</label> <div class="col-sm-8"> <input type='text' size='5' name="man" id="input1" value="" class='input' disabled></input> </div> </div> <div class="form-group"> <label for="name" class="col-sm-2 control-label">Number Of Women</label> <div class="col-sm-8"> <input type='text' size='5' name="woman" id="input2" value="" class='input' disabled></input> </div> </div> 

 function JoinedOrNot(){ var cat = document.getElementById("category"); if(cat.value == "Men"){ document.getElementById("input1").disabled = false; }else{ document.getElementById("input1").disabled = true; } if(cat.value == "Women"){ document.getElementById("input2").disabled = false; }else{ document.getElementById("input2").disabled = true; } if(cat.value == "Both"){ document.getElementById("input1 input2").disabled = false; }else{ document.getElementById("input1 input2").disabled = true; } if(cat.value == "Youth"){ document.getElementById("input1 input2").disabled = false; }else{ document.getElementById("input1 input2").disabled = true; } } 

Answer 1

使用switch而不是多個ifs。

  function JoinedOrNot() { var cat = document.getElementById("category").value; var input1Disabled = false; var input2Disabled = false; switch(cat) { case "Men": input2Disabled = true; break; case "Women": input1Disabled = true; break; } document.getElementById("input1").disabled = input1Disabled; document.getElementById("input2").disabled = input2Disabled; } 

  <div class="form-group"> <label for="category" class="col-sm-2 control-label">Group Category</label> <div class="col-sm-3"> <select class="form-control" name="category" id="category" onChange="JoinedOrNot()"> <option value="">Select Category</option> <option value="Men">Men</option> <option value="Women">Women</option> <option value="Youth">Youth</option> <option value="Both">Both</option> </select> </div> </div> <div class="form-group"> <label for="name" class="col-sm-2 control-label">Number Of Men</label> <div class="col-sm-8"> <input type='text' size='5' name="man" id="input1" value="" class='input' disabled></input> </div> </div> <div class="form-group"> <label for="name" class="col-sm-2 control-label">Number Of Women</label> <div class="col-sm-8"> <input type='text' size='5' name="woman" id="input2" value="" class='input' disabled></input> </div> </div>