Question

我正在尝试从下拉列表中选择某些选项时启用输入

我写了解决这个问题的代码，但是没有用。这是我的代码

 render(
  <>
     <Login />
     <Register />
  </>, 
  document.getElementById("root")
);

因此，我希望当我选择“ТипP”选项时，输入（id =“ size”）应启用，如果选择了其他选项，则应保持禁用状态

Answer 1

===是严格相等的运算符，它同时检查 value 和 type ，并且由于元素的值始终是字符串，因此将其与数字将始终失败。

请注意：您在props中也有错字，应该是prop。控件（dropDown）和代码（dropdown）中使用的属性 id 彼此不匹配。

更改

if( $(this).val() === 1) {

收件人

if( $(this).val() === "1") {

Answer 2

您犯了三个错误：

this.val()返回一个字符串，但是您正在将其与数字1进行比较。
有一个错字$('#dropdown')应该是$('#dropDown')
第二次使用prop代替props

您正在设置true和false，以便可以直接将条件传递给prop()

$('#dropDown').change(function() {
     $('#size').prop( 'disabled', $(this).val() !== "1" )
});

$('#dropDown').change(function() {
     $('#size').prop( 'disabled', $(this).val() !== "1" )
});

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<body>

<select class="form-control" id="dropDown">
      <option id="n" value="0"> Тип N </option>
      <option id="p" value="1"> Тип P </option>
      <option id="c" value="2"> Тип C </option>
      <option id="v" value="3"> Тип V </option>
      <option id="t" value="4"> Тип T </option>
      <option id="s" value="5"> Тип S </option>
</select>

   <div>
      <label class="control-label">
          <span th:text="#{size}"></span>
      </label>
     <input id="size" type="text" class="form-control" />
   </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script th:inline="javascript">


</script>
</body>
</html>

您可以使用三元运算符来缩短功能。

如何通过选择选项使输入禁用/启用？

2 个答案: