僅當選擇了某個下拉菜單項時，如何激活輸入字段

Question

如果選擇下拉列表中具有相同名稱的項目，我希望激活名為其他的<input> 。 否則，它將被禁用。

<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

您可以基於value將禁用屬性設置為true / false。 您可以將禁用的屬性添加到輸入中，因為下拉列表在頁面加載時沒有選擇其他值。

 $(".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> 

Answer 2

將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 3

最好的選擇是將其更改為表單select元素，因為它具有內置的onchange事件。 因為您擁有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>