The question is published on by Tutorial Guruji team.
I’m developing a SAPUI5 application. And in the page, the user has to select an item from select_A before he/she selects from select_B. Until he/she selects from select_A, the select_B box is disabled.
What I would like to have is: even when the select_B box is disabled, and the user tries to click it before selecting from select_A, the select_A box should become red.
I tried using onclick
event, but, when the box is disabled, it doesn’t do anything.
Only as a test, I made this:
oSelectTamanho = new sap.m.Select(); oSelectTamanho.onclick = function() { console.log("click"); }
As I mentioned, it only outputs the “click” when the box is enabled, and I would need this when the box is disabled.
Do you have any idea how can I achieve this?
Answer
As you see, disabled
elements do not produce events
. Using an overlay element is one possible solution. Example using an overlay div.
CSS
#wrapper { display:inline-block; position:relative; } #overlay { display:none; width:100%; height:100%; position:absolute; top:0 left:0; bottom:0; right:0; } #cars:disabled + #overlay { display:block; }
HTML
<button id="button">Enable</button> <div id="wrapper"> <select id="cars" disabled> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <div id="overlay"></div> </div>
Javascript
var button = document.getElementById('button'), cars = document.getElementById('cars'), overlay = document.getElementById('overlay'); button.addEventListener('click', function () { cars.disabled = !cars.disabled; if (cars.disabled) { button.textContent = 'Enable'; } else { button.textContent = 'Disable'; } }, true); cars.addEventListener('change', function (evt) { console.log(evt.target.value); }, true); overlay.addEventListener('click', function () { alert('Disabled'); }, true);
On jsFiddle