javascript - 如何仅在选择某个下拉菜单项时激活输入字段

Question

我想要<input>如果在下拉列表中选择了同名的项目，则将激活名为 other 的项目。否则，它将被停用。

<div class="dropdown">
  Choisir le type:
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Type</a>
  <input type="hidden" id="selectedFormation" name="selectedFormation" />
  <ul class="dropdown-menu">
    <li><a href="#" data-value="item1">item1</a></li>
    <li><a href="#" data-value="item2">item2</a></li>
    <li><a href="#" data-value="other">other</a></li>
  </ul>
</div>
<input type="text" class="form-control" name="other" id="other">

$(".dropdown-menu li a").click(function() {
  $(this)
    .closest(".dropdown")
    .find(".btn")
    .html($(this).text() + ' <span class="caret"></span>');
  var value2 = $(this).data("value");
  $("#selectedFormation").val(value2);
});

Answer 1

将 disabled 属性添加到输入。现在，单击 anchor 标记，获取值，如果是其他则启用或禁用它

$(".dropdown-menu li a").click(function() {
  $(this).closest('.dropdown').find('.btn').html($(this).text() + ' <span class="caret"></span>');
  var value2 = $(this).data("value");

  $('#selectedFormation').val(value2);
  // added code here
  if (value2 === 'other') {
    $('#other').prop('disabled', false)
  } else {
    $('#other').prop('disabled', true)
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown"> Choisir le type :
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Type</a>
  <input type="hidden" id="selectedFormation" name="selectedFormation" />
  <ul class="dropdown-menu">
    <li><a href="#" data-value="item1">item1</a></li>
    <li><a href="#" data-value="item2">item2</a></li>
    <li><a href="#" data-value="other">other </a></li>
  </ul>
</div>
<input type="text" disabled class="form-control" name="other" id="other">