Question:
I have a disabled select
and I want that if you try to click or hover over it, show a message to warn the reason why it is disabled, but apparently the events do not work with disabled elements, so I do not know if there is a way to do what I say, I already have the method, it's just making it work with an event. I leave the HTML
and the method in JavaScript
HTML
of the 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é");
}
}
Thanks in advance.
Answer:
You should note that disabled elements do not fire mouse events.
Having this as a base then it occurs to me to create a mask inside the parent container of the select
. Said mask will have an absolute position and will be the element to which the event will be assigned and its display
property will depend on the state in which the select
is:
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>