当我在选择选项中选择男人类别时,我有四个类别,分别是男人,女人,青年和(男人和女人),输入文本的女性框被禁用,而当我选择女人类别时,我输入的文本框是男性被禁用,我寻求帮助的是当我选择青年或两个类别时如何使两个文本框同时处于活动状态。下面是我的代码。
<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;
}
}
最佳答案
使用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>
关于javascript - 根据选择选项,同时启用和禁用两个文本框,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42120726/