Select2でオプションを選択する - トリガーしないアクションを無効/有効にする

Question

Select2ドロップダウンボックスが1つあり、その隣に空白のテキストボックスがあり、デフォルトで無効になっています。

ユーザが「ServiceNow」というオプションを選択すると、テキストボックスが無効に設定されます。

現在、機能はランダムに見えます。利用可能な4つのオプションのうち2つがフィールドを有効にし、2つが無効にします。私が望むものさえそれを可能にしない。私はここで間違って何をしていますか？

フォームのHTML

<div> 
    <label for="feature">Feature</label> 
    <select class="form-control select2" style="width: 100%;" name="feature" id="feature"> 
    <option selected="selected" disabled="disabled">-Select-</option> 
    <option name="ServiceNow" value="ServiceNow">Service Now</option> 
    <option>Epic Upgrade</option> 
    <option>Alarais Interop</option> 
    <option>Pyxis Upgrade</option> 
    </select> 
</div> 
<div class="col-xs-4"> 
    <label for="serviceNowID">ServiceNow ID</label> 
    <input type="text" class="form-control" name="serviceNowID" id="serviceNowID" disabled="disabled" placeholder="ServiceNow ID (This doesn't work yet.)"> 
</div> 

関連JS

<script> 
//Get the ServiceNow thing to unlock on option select 
//Evaluate if option is selected 
$('#feature').on("select2:selecting", function(e) { 
    var choice = $(this).find('option').val(); 

    if ($(this).val() == 'ServiceNow') { 
    document.getElementById("serviceNowID").disabled = false; 
    } else { 
    document.getElementById("serviceNowID").disabled = true; 
    } 
}); 
</script> 

ありがとう！ユーザーがオプションを選択すると

Answer 1

は、すなわち「ServiceNowは、」私は、テキストボックスがfalseに無効に設定したいと思います。

'選択'の代わりに '選択'イベントを使用する必要がありますか？ここで

$('#feature').on("select2:select", function(e) { 
... 

Answer 2

はあなたを助けるかもしれない例です。もちろん

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <label for="feature">Feature</label> 
 
    <select class="form-control select2" style="width: 100%;" name="feature" id="feature"> 
 
       <option selected="selected" disabled="disabled">-Select-</option> 
 
       <option name="ServiceNow" value="ServiceNow">Service Now</option> 
 
       <option>Epic Upgrade</option> 
 
       <option>Alarais Interop</option> 
 
       <option>Pyxis Upgrade</option> 
 
       </select> 
 
</div> 
 
<div class="col-xs-4"> 
 
    <label for="serviceNowID">ServiceNow ID</label> 
 
    <input type="text" class="form-control" name="serviceNowID" id="serviceNowID" disabled="disabled" placeholder="ServiceNow ID (This doesn't work yet.)"> 
 
</div> 
 

 
<script> 
 
    //Get the ServiceNow thing to unlock on option select 
 
    //Evaluate if option is selected 
 
    $('#feature').on("change", function(e) { 
 

 
    if ($(this).val() == 'ServiceNow') { 
 
     $("#serviceNowID").attr('disabled',false); 
 
    } else { 
 
     $("#serviceNowID").attr('disabled',true); 
 
    } 
 
    }); 
 
</script>