根据选择选项选项同时启用和禁用两个文本框

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

使用开关而不是多个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>