選択肢の選択肢に基づいて同時に2つのテキストボックスを有効または無効にする

Question

男性、女性、青少年両方の男性（男性と女性）の4つのカテゴリがあります。男性の数を入力するテキストボックスが無効になっている女性のカテゴリを選択すると、私は青年または両方のカテゴリを選択すると同時に2つのテキストボックスをアクティブにする方法です。以下は私のコードです。代わりに、複数のIFSの

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

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

Answer 1

使用スイッチ。

  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>