HTML Select (active disabled attribute) - How to show a message when mouseover is triggered?

Question

HTML Select (active disabled attribute) - How to show a message when mouseover is triggered?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Good morning,

I'm developing a menu where options are linked by selects.

All selects are disabled, and will be released only when a radio master input is triggered.

It's still working okay. However, I need to put a warning in the selects disabled, which warns the user that for this select to function it needs to click on the radio input.

I made a test with the select in active mode and it worked quietly, but in the disabled mode only appears the red ball cut, warning that it can not use at the moment.

Would anyone have an idea how I can program this?

Thank you in advance.

html jquery

asked by anonymous 19.06.2018 / 13:33

2 answers

Add multidimensional PHP array failed to open stream: HTTP wrapper does not support writeable connections in

score 0 · Answer 1

I made an example here with only CSS , I do not know how the project is there, if I needed to mouseover for other things, but if I could use hover > of CSS follows the example.

$(document).ready(function() {
    $("input[type=radio]").on("click", function() {
    $("select").prop("disabled", false);
    $(".mensagem").css("display","none");
  })
})

.mensagem {
  display: none;
  margin-top: 5px;
  padding: 5px;
  width: 50%;
  border-radius: 4px;
  background-color: #FF5733;
  color: #fff;
  text-align:  center;
}
select:hover ~ .mensagem {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><selectdisabled><optionvalue="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<input type="radio">

<div class="mensagem">
  <p>Clique no radio para habilitar o menu</p>
</div>

score 0 · Answer 2

If you want something simple with only CSS I made this very basic template. It does not leave btn disabled, it just does not let the user interact with the field.

input + .holder:hover::after {
    content: "clique no btn primeiro";
    width: auto;
    height: auto;
    background-color: red;
}
input:checked + .holder:hover::after {
    content: "";
}
input + .holder > select {
    -ms-touch-select: none;
    touch-action: none;
    pointer-events: none;
    color: silver;
}
input:checked + .holder > select {
    -ms-touch-select: unset;
    touch-action: unset;
    pointer-events: unset;
    color: initial;
}

Btn<input type="radio">
<div class="holder">
    <select name="lista" id="lista" tabindex="-1">
        <option value="">Um</option>
        <option value="">Dois</option>
        <option value="">Três</option>
    </select>
</div>