Q: How to change the color of field taking attribute from the field I tried below code to change color of a few disabled select items. However it didn't work. So I tried to change the color of the select field by reading its attribute, but that is not working. 
Any help would be great. Is there any way I can do this in css?. I'm very new to this. Please correct any errors. Thank you
<select disabled style="color:red">
    <option>
        --Select--
    </option>
    <option class="red">
        one
    </option>
    <option>
        two
    </option>
    <option class="red">
        three
    </option>
    <option>
        four
    </option>
</select>

Script
jQuery(document).on("change", function(event) {
      if ($(this).find("style="color: red;")("red ")){
          $(this).addClass("redtext");
        }else {
          $(this).removeClass("redtext");
        }
});

.red{color:red !important;}
.redtext{color:#f00 !important;}   
.redtext, .select_red:disabled{color:#f00 !important;}


A: Here is a simplified example of how you can do this. The below code example does the following:
First, create a variable to keep track of the enabled/disabled state (select element) (and also one for the button text).
Then, when event happens (button click), change the enable/disable variable from false-to-true, or inverse. THEN, use that variable to set the disabled attribute on the select element.
In the same button-click function, also change the button text. (same idea, but uses a ternary statement to update the text).
Finally, (as an unnecessary extra for demo purposes): when the select element is changed, change the foreground color of the select text and of all option sub-elements. Just to show you how to do that...


var is_disabled = false;
var btn_text = 'Disable Select';
//Change color of select options if new item selected
$(document).on('change', 'select', function() {
    $(this).addClass("bluetext");
    $(this).find('option').addClass("bluetext");
});

//Mod button text and select bg color on button click
$('button').click(function(){
  is_disabled = !is_disabled;
  btn_text = (is_disabled) ? 'Enable Select' : 'Disable Select';
  $('button').text(btn_text);
  $('select').attr('disabled', is_disabled);
});
select:disabled{background:pink;}
.bluetext{color:dodgerblue;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<select>
  <option>--Select--</option>
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
</select>
<button>Disable Select</button>


References:
https://www.w3schools.com/jsref/jsref_operators.asp
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
