6

Tengo un select deshabilitado y quiero que sí se intenta de clickear o pasar por encima de él, muestre un mensaje para avisar la razón por la cual está deshabilitado, pero al parecer lo eventos no funcionan con elementos deshabilitados, entonces no sé sí haya una forma de hacer lo que digo, el método ya lo tengo, solo es hacerlo funcionar con un evento. Dejo el HTML y el método en JavaScript

HTML del select

<div class="form-group row ml-1 justify-content-center">
            <label for="empleado" class="col-form-label">Empleado:</label>
            <div class='col-sm-4 mr-3'>
                <select type="text" class="custom-select" onmouseover="empleadoIsEmpty()" id="empleado" name="empleado" disabled="disabled">
                    <option value="0">Seleccionar empleado</option>
                    <?php 
                        for ($i=0; $i < count($empleados); $i++) { 
                            echo "<option value='{$empleados[$i]['id_empleado']}'>{$empleados[$i]['nombres']} {$empleados[$i]['apellidos']}</option>";
                        }
                    ?>
                </select>
            </div>

JS

function empleadoIsEmpty(){
    empleado = document.forms["formRegistro"]["empleado"];

    if(empleado.disabled){
        msg = "<ul>";
        msg += "<li> Debes seleccionar fecha y sede para habilitar los empleados </li>" 
        msg += "</ul>";

        document.getElementById("errores").innerHTML = msg;
    }else{
        console.log("no entré");
    }
}

Gracias por anticipado.

2 respuestas 2

3

Debes tener en cuenta que los elementos deshabilitados no activan los eventos del mouse.

Teniendo esto como base entonces se me ocurre crear una máscara dentro del padre contenedor del select. Dicha máscara tendrá una posición absoluta y será el elemento al cual se le asignará el evento y su propiedad display dependerá del estado en el que se encuentre el select:

function empleadoIsEmpty(){
    empleado = document.forms["formRegistro"]["empleado"];

    if(empleado.disabled){
        msg = "<ul>";
        msg += "<li> Debes seleccionar fecha y sede para habilitar los empleados </li>" 
        msg += "</ul>";

        document.getElementById("errores").innerHTML = msg;
    }else{
        console.log("no entré");
    }
}
#contenedor{
  position: relative;
}

/* Aplicamos la instrucción de que si el elemento "empleado" es disabled entonces su elemento hermano "mascara" tendrá un display block */
#empleado:disabled + #mascara{
  display: block;
}

#mascara{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}
<form name="formRegistro">
  <label for="empleado" class="col-form-label">Empleado:</label>
  <div class='col-sm-4 mr-3' id="contenedor">
    <select type="text" class="custom-select" id="empleado" name="empleado" disabled="disabled">
      <option value="0">Seleccionar empleado</option>
    </select>
    <div id="mascara" onmouseover="empleadoIsEmpty()"></div>
  </div>
  
  <div id="errores"></div>
</form>

9
  • 1
    Tenía en mente meter el select en un div y ponerle el mouseover en ese div, al igual validar con js si tenía el atributo disabled activara la función, pero tu respuesta es mucho mejor. Commented el 10 jul. 2019 a las 21:44
  • 1
    @VickMuñoz yo también estaba pensandolo hacer así, pero ya Bender solucionó la vida
    – DaxTter77
    Commented el 10 jul. 2019 a las 21:49
  • 1
    @VickMuñoz teníamos casi la misma solución jejejeje solo que con elementos diferentes a la hora de asignar el evento, saludos bro y gracias jejeje! Commented el 10 jul. 2019 a las 21:52
  • 1
    @DaxTter77 me alegra que te sirviera como solución, ahora no pude entender una de tus preguntas pero en esta si pude ayudarte jejejeje saludos! Commented el 10 jul. 2019 a las 21:53
  • 2
    @BenderPaisa ésta es más importante, y aquí sí llegaste con tu capa de héroe, gracias, saludos men
    – DaxTter77
    Commented el 10 jul. 2019 a las 21:57
3

Como bien ha explicado @BenderPaisa en su respuesta hay eventos que no se disparan sobre elementos disabled.

Mi solución en principio es similar, y se puede lograr el mismo comportamiento simplemente "moviendo" el select por "debajo" del contenedor.

Demo:

function empleadoIsEmpty() {
  empleado = document.forms["formRegistro"]["empleado"];

  if (empleado.disabled) {
    msg = "<ul>";
    msg += "<li> Debes seleccionar fecha y sede para habilitar los empleados </li>"
    msg += "</ul>";

    document.getElementById("errores").innerHTML = msg;
  } else {
    console.log("no entré");
  }
}
#empleado:disabled {
  position: relative;
  z-index: -1;
}
<form name="formRegistro">
  <label for="empleado" class="col-form-label">Empleado:</label>
  <div class='col-sm-4 mr-3' onmouseover="empleadoIsEmpty()">
    <select type="text" class="custom-select" id="empleado" name="empleado" disabled="disabled">
      <option value="0">Seleccionar empleado</option>
    </select>
  </div>

  <div id="errores"></div>
</form>

1
  • Gracias, un buen método también
    – DaxTter77
    Commented el 11 jul. 2019 a las 13:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.