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

时间:2018-07-03 07:11:27

标签: javascript jquery html

我试图禁用文本框。当我仅取一个值时,它就起作用了。当我给出诸如"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

我应该改变什么?

2 个答案:

答案 0 :(得分:1)

实际上,您编写的代码中很少有错误需要修复:

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

这应该是您的代码:

$('#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" />

答案 1 :(得分:0)

您可以这样禁用:http://jsfiddle.net/a8ZWx/390/

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