Select a style option from the drop-down menu to be disabled once it is checked

Question

Select a style option from the drop-down menu to be disabled once it is checked

Looking at the image below, I am seeking for Exp. Year (the disabled option) to appear grey as a placeholder when the page loads, and then turn black when an option like 2016 is clicked on. Is there a way to achieve this without using JavaScript?

JSFiddle

Current Behavior:

Desired Outcome: (Exp. Month appears grey initially, but switches to black when 2016 is selected)

.select-box {
  border: 1px solid $ghBlack;
  height: 36px;
  background: transparent;
  margin: 10px 0 14px 0;
  color: #000;
}

option:disabled {
  color: #a9a9a9;
}

option:not(:checked) {
  color: #a9a9a9;
}

javascript jquery html css

Answer 1

Answer №1

To achieve this task, one approach you can take is shown below:

// Using an anonymous function as the change-event handler:
$('select').change(function () {
    // Modifying the 'color' property of the select element:
    $(this).css('color', function () {
        // Efficiently caching the 'this' variable for repeated use:
        var self = this,
        // Locating the options of the select element:
            opts = self.options;
        // Obtaining the currently selected option, and then checking if
        // it's the default-selected option (returns a Boolean); if it is,
        // we set the color to '#aaa', otherwise set it to '#000':
        return opts[self.selectedIndex].defaultSelected ? '#aaa' : '#000';
    });
// Triggering the change-event so that this executes on page-load:
}).change();

Check out the JS Fiddle demo here.

For more information, please refer to:

change().
css().

Answer 2

To achieve this task, one approach you can take is shown below:

// Using an anonymous function as the change-event handler:
$('select').change(function () {
    // Modifying the 'color' property of the select element:
    $(this).css('color', function () {
        // Efficiently caching the 'this' variable for repeated use:
        var self = this,
        // Locating the options of the select element:
            opts = self.options;
        // Obtaining the currently selected option, and then checking if
        // it's the default-selected option (returns a Boolean); if it is,
        // we set the color to '#aaa', otherwise set it to '#000':
        return opts[self.selectedIndex].defaultSelected ? '#aaa' : '#000';
    });
// Triggering the change-event so that this executes on page-load:
}).change();

Check out the JS Fiddle demo here.

For more information, please refer to:

change().
css().

Answer 3

Answer №2

It seems that without the use of JavaScript, you won't be able to achieve your desired outcome. This is because the color of the main option is specifically defined by the CSS selector shown below:

.select-box {
  color: grey;
}

You do have the option to change the colors of the dropdown options when the select box is opened. For a demonstration, you can refer to this fiddle: http://jsfiddle.net/san6q621/

Answer 4

It seems that without the use of JavaScript, you won't be able to achieve your desired outcome. This is because the color of the main option is specifically defined by the CSS selector shown below:

.select-box {
  color: grey;
}

You do have the option to change the colors of the dropdown options when the select box is opened. For a demonstration, you can refer to this fiddle: http://jsfiddle.net/san6q621/

Select a style option from the drop-down menu to be disabled once it is checked

Answer №1

Answer №2

Similar questions

``I just retrieved data from two separate Mongoose documents in the database

Align an element to the center and then align a second element to the right using Tailwind CSS

mobile input sliders for selecting ranges

Build a custom form for the purpose of exporting an HTML file

Leveraging the while/for loops for the purpose of reading exactly two lines of input

Rendering implemented in an Angular component through Three.js

What could be the reason for my CSS animation with :hover @keyframes not functioning?

Running the command "nexrjs create next-app" successfully generates all the necessary directories for the

Challenges with creating an increment and decrement form component using Vue

Anticipated outcome for absent callbacks in module API implementation

Is it possible to create a website with a single session for all users using JavaScript

What is the best way to iterate through nested Models in CanJS?

"Displaying 'Object Object' as a title when hovering over an element

What is the best way to adjust the sprite's position in real-time

Removing a class with JQuery using the Contains method

Switching the div to display or hide

Enhance your data visualization with d3.js version 7 by using scaleOrdinal to effortlessly color child nodes in

The fade in and fade out effects using JQuery are not functioning as expected despite adding a delay

The fusion of PHP and HTML coding

The OnClick function seems to be unresponsive, however, there are no error messages displaying in