Selecting Option in Select2 - Disable / Enable action not triggering

0
votes

I have a single select Select2 drop down box and a blank textbox next to it that is disabled by default.

When the user selects an option, namely "ServiceNow" I would like the text box to set disabled to false.

Currently, the functionality seems random. Two of the four available options enable the field, two disable it. Not even the one I want enables it. What am I doing incorrectly here?

The form 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>

Related 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>

Thanks!

2
javascriptjqueryformsjquery-select2

2 Answers

1
votes

When the user selects an option, namely "ServiceNow" I would like the text box to set disabled to false.

Maybe you should use the 'select' event instead of 'selecting'?

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

Here is an example which may help you:

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