HTML add help symbol(button) beside disabled option

Question

I would like to know how you could add a help symbol beside a disabled option in a dropdown in html, if possible. I would like it so that when you click on the symbol it then tells you why that option has been disabled. Something similar to the dropdown below.

This is the basic code I have for the dropdown right now.

<select name="description" rows="4" class="form-control">
                <option value="RhinoTab"><?php echo _l('estimate_table_option1_1'); ?></option>
                <option value="RTi"><?php echo _l('estimate_table_option1_2'); ?></option>
                <option value="Magical Shit" disabled>Magical Shit</option>
              </select>

Possible duplicate of [Style disabled button with CSS](http://stackoverflow.com/questions/14750078/style-disabled-button-with-css) — Abdulla Nilam, May 04 '17 at 12:53
Looks like they want to fully disable the option. I want to add a symbol beside the option when it is disabled so that when you click the symbol it states why the option is disabled. — Tyler Fontaine, May 04 '17 at 12:55
The CSS was already done for the site this is on so i'll have to track that section down. I'm not all that great with CSS. — Tyler Fontaine, May 04 '17 at 13:06
Could something like this be done, except on the click event it shows the message? (http://stackoverflow.com/questions/3100319/event-on-a-disabled-input) — Tyler Fontaine, May 04 '17 at 13:32

score 0 · Accepted Answer · answered May 04 '17 at 13:46

I ended up finding an example I was able to use as a work around to get my project working. Instead of having an icon it is when you click on the "disabled" option but it will do something close enough to what I was looking for.

 $(function(){
    var options_sel_idx = 0;

    $("#options").on("change", this, function(event) {
        if($(this.options[this.selectedIndex]).hasClass("disabled")) {
            alert("a");
            this.selectedIndex = options_sel_idx;
        } else {
            options_sel_idx = this.selectedIndex;
        }
    });
});

<style type="text/css">
    .disabled {color:#808080;}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="options" id="options">
  <option value="">Select</option>
  <option value="1">Options 1</option>
  <option value="0" class="disabled">Options 2</option>
  <option value="0" class="disabled">Options 3</option>
  <option value="0" class="disabled">Options 4</option>
</select>

HTML add help symbol(button) beside disabled option

1 Answers1