JSFiddle - React, Tailwind, and code Playground

by CRHain88

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<label id="new-entity">
  New Entity</label>

<select id="entity-type-select">
  <option value=""> </option>
  <option value="TRIP">Trip </option>
  <option value="PCCN"> MWB</option>
  <option value="CLOSE">Close </option>
  <option value="SHIPMENT">Shipment </option>
</select>
<br />
<label id="message-status">Message Status</label>

<select id="message-status-select">
  <option value="&nbsp"> </option>
  <option value="NEW">NEW </option>
  <option value="CHANGE">CHANGE</option>
  <option value="AMEND">AMEND </option>
  <option value="DELETE">DELETE </option>
  <option value="DBREMOVE" disabled>DBREMOVE</option>
</select>

JavaScript

// Enable Message Status option DBREMOVE if New Entity is Shipment
// otherwise disable (hide/grayout)

$('#entity-type-select').on('change', function() {
  if ($(this).val() === "SHIPMENT") {
    $('#message-status-select option[value="DBREMOVE"]').prop('disabled', false);
  } else {
    $('#message-status-select option[value="DBREMOVE"]').prop('disabled', true);
  }
});

// 1) you were comparing the wrong value. "Shipment" !== "SHIPMENT"
// 2) manually add `disabled` to DBREMOVE to start with, since your code will only fire when
//    entity-type-select is changed.
// 3) I forget how you were selecting `...option[value]`, but it was wrong.
// 4) for performance, I changed your second query of $('#entity-type-select') to $(this)
// 5) JS Fiddle sucks, now that you have to manually add your dependencies such as jQuery.