Question

当我选择激活JavaScript的选项时，只有一个输入有效。如何使用该JavaScript代码使它们都工作？

＆＃13;

var myselect = document.getElementById('myselect');

function createOption() {
  var currentText = document.getElementById('mytext').value;
  var objOption = document.createElement("option");
  objOption.text = currentText;
  objOption.value = currentText;
}

myselect.onchange = function() {
  var mytextfield = document.getElementById('mytext');
  if (myselect.value !== 'specify') {
    mytextfield.disabled = true;
  } else {
    mytextfield.disabled = false;
  }
}

＆＃13;

<select class='form-control' id='myselect' required style='cursor:pointer;'>
<option disabled selected>Select Your Location</option>
<option>Here</option>
<option value='specify'>Outside Here - Specify Below</option>
</select>

<div class='form-group'>
  <label for='email'>Specify:</label>
  <input class='form-control' type='text' value='' name='mytext' id='mytext' disabled placeholder='Specify Here' required>
</div>

<div class='form-group'>
  <label for='email'>Specify:</label>
  <input class='form-control' type='text' value='' name='mytext' id='mytext' disabled placeholder='Specify Here' required>
</div>

＆＃13;

Answer 1

看起来您使用输入字段的相同ID两次，这是您的代码背后的错误。 解决此问题的一种方法是更改并声明第二个ID的另一个ID，使用javascript选择然后使用新的var生成您想要的代码。

或

您可以为输入字段设置相同的类，然后使用javascript选择类： var inputs = document.getElementsByClassName("CLASS_NAME");
这将返回一个数组......但您可以通过以下方式选择输入字段： var firstField = inputs[0], secondField = inputs[1] 这不是推荐的方法，但就像魅力一样。

Answer 2

＆＃13;

function myfunction()
{
var e = document.getElementById("letter_number");
var strUser = e.options[e.selectedIndex].value;
if(strUser == "Letters")
{
	document.getElementById("letter1" ).disabled=false;
	document.getElementById("letter2" ).disabled=false;
	document.getElementById("letter3" ).disabled=false;
	document.getElementById("number1" ).disabled=true;
	document.getElementById("number2" ).disabled=true;
	document.getElementById("number3" ).disabled=true;
	}
else
{
	

	document.getElementById("letter1" ).disabled=true;
	document.getElementById("letter2" ).disabled=true;
	document.getElementById("letter3" ).disabled=true;
	document.getElementById("number1" ).disabled=false;
	document.getElementById("number2" ).disabled=false;
	document.getElementById("number3" ).disabled=false;
}
}

＆＃13;

<select onchange="myfunction()" id="letter_number">
<option name="type" value="Letters">Letters</option>
<option selected name="type" value="Numbers">Numbers</option>
</select>
<select id="letter1" disabled="disabled">
       <option>Letters</option>
       <option>Letters</option>
</select>
<select id="letter2" disabled="disabled">
       <option>Letters</option>
       <option>Letters</option>
</select>
<select id="letter3" disabled="disabled">
       <option>Letters</option>
       <option>Letters</option>
</select><br><br>

<select id="number1" disabled="disabled">
       <option>Numbers</option>
       <option>Numbers</option>
</select>
<select id="number2" disabled="disabled">
       <option>Numbers</option>
       <option>Numbers</option>
</select>
<select id="number3" disabled="disabled">
       <option>Numbers</option>
       <option>Numbers</option>
</select>

＆＃13;

如何使用一个Javascript代码禁用多个输入标记

2 个答案: