javascript - 如何使用选项值禁用文本框

Question

我曾尝试禁用文本框。当我只接受单一值(value)时，它就起作用了。当我给出或条件像 "1"|| “2” || “6” 文本框未被禁用。如果我选择值 "6"，那么应该存在一个文本框。

我试过这段代码:

$('#education').on('change', function() {
    if ($(this).val() == "6" || "1" || "4") {
        $('#degree').prop("disabled", true);
    } else {
        $('#degree').prop("disabled", false);
    }
    $('#txtData').show();
    else
        $('#txtData').hide();
});

另请参阅以下内容 Fiddle .

我应该改变什么？

Answer 1

实际上您编写的代码中有一些错误，需要修复:

• 要将一个值与您不能只调用的三个多个值进行比较，$(this).val() == "6"|| “1” || “4”。您需要分别将 $(this).val() 与这些值中的每一个进行比较，或者您可以将这些值放在一个 array 中并检查该值是否存在。
• 您正在尝试获取 ID 为 degree 且页面中不存在的 education，确保引用现有元素。
• 还有最后一个 else 放错了地方，当你想执行的时候当条件为 true 时的多个语句只需将它们全部放入相同的 if/else block 。
• 如果您想检查这 3 个值中的特定值，您可以在第一个值中使用内部 if block 来执行此操作。

你的代码应该是这样的:

$('#myselect').on('change', function() {
  if (["6", "1", "4"].indexOf($(this).val()) > -1) {
    $('#txtData').prop("disabled", true);
    if ("4" == $(this).val())
      $('#txtData').hide();
    else
      $('#txtData').show();
  } else {
    $('#txtData').prop("disabled", false);
    $('#txtData').show();
  }
});

演示:

$('#myselect').on('change', function() {
  if (["6", "1", "4"].indexOf($(this).val()) > -1) {
    $('#txtData').prop("disabled", true);
    if ("4" == $(this).val())
      $('#txtData').hide();
    else
      $('#txtData').show();
  } else {
    $('#txtData').prop("disabled", false);
    $('#txtData').show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Two</option>
  <option value="5">Three</option>
  <option value="6">Three</option>
</select>
<br /> Input: <input type="text" id="txtData" />