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