How to change the color of field taking attribute from the field

Question

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

first of all your select has no class, so it won't be ever find by class `.select_red` — Flash Thunder, May 21 '20 at 11:03
yeah i got it. is there any way i can do it by taking attribute? without class name — Nit, May 21 '20 at 12:28
What do you want to achieve? As your select is `disabled` it won't change, what is the use of binding `change` event? — Kiran Shinde, May 21 '20 at 12:38
If you enable the `select` later on somehow, you can tell if the style attribute is set to red using plain DOM features: `if (this.style.color === 'red')`. There are several things wrong with the way you're using jQuery in your current code, not the least of which is failing to escape your quote characters. If you really want to use jQuery, see [Select elements by attribute](https://stackoverflow.com/q/1097522/215552) — Heretic Monkey, May 21 '20 at 12:41
@Kenny the select fields at 1st will be enabled, after certain condition it will be disabled. while the color of the select field when enabled will be red, after disabled it will change to black. — Nit, May 21 '20 at 13:39
@HereticMonkey , thx for the link.. as i'm new to this domain.. i dont know much of the things is Jquery. — Nit, May 21 '20 at 13:41
@Nit then what is the purpose of javascript you have attached. As there are lot of syntax error, we would like to why you have written that — Kiran Shinde, May 21 '20 at 13:53
@Nit you're just doing it wrong, hard to help you when you don't understand the basics... you can select an element by style attribute, but it's not the problem in here. Check out this basic example: https://jsfiddle.net/1s3wc7k8/ — Flash Thunder, May 21 '20 at 15:18
@FlashThunder.. i know basics.. what i was not knowing is if its possible to change the color using attribute in jquery. anyway thx — Nit, May 21 '20 at 17:23
@Kenny as i mentioned.. i may be wrong . i just tried what i felt is correct.. — Nit, May 21 '20 at 17:24

cssyphus · Accepted Answer · 2020-05-22T13:03:05.763

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

How to change the color of field taking attribute from the field

1 Answers1