Как активировать поле ввода только при выборе определенного пункта выпадающего меню

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 свойство к входу.Теперь нажмите на тег привязки, получите значение и, если оно 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);
  // 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">

Answer 2

Лучше всего изменить его на элемент формы select, поскольку в нем есть встроенное событие обмена.Поскольку у вас есть ul, вам придется воссоздать его, добавив классы в зависимости от наведения, что потребует намного больше JS.Смотрите фрагменты кода для onchange на этой странице:

https://www.w3schools.com/jsref/event_onchange.asp

Модифицируйте свой код здесь так, чтобы он напоминал ваш случай:

<select id="mySelect" onchange="myFunction()">
  <option value="item1">Item 1
  <option value="item2">Item 2
  <option value="other">Other
</select>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("mySelect").value;
    document.getElementById("demo").innerHTML = "You selected: " + x;
    if (x === "other") {
        // enable form field code
    }
}
</script>

Answer 3

Можно установить для свойства отключено значение true / false на основе значения .Вы можете добавить атрибут disabled ко входу, так как в раскрывающемся списке нет значения 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);
  if(value2 == 'other')
    $('#other').attr('disabled', false);
  else
    $('#other').attr('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" class="form-control" name="other" id="other" disabled>