This post will explain steps to trigger click event on disable html elements. Generally disable HTML elements will not fire any javascripts events but some times we needs to disable HTML elements initially and then in click event we may need to enable element. That kind of scenarios we can use following steps to archive it.
Whole example will be available in JSFiddle and you can try it your self.
For this example I will use simple button to change a select field enable/disable function. Initially select field will be disabled and on the click event it will get enable. But actually user click on a another div placed in front of the select field but user will not have any idea about that. This div will be enable only when select field is disable.
<button id="enbDesBtn">Enable Passengers</button>
<div id="wrapper">
<select id="passengers" disabled>
<option value="1">Lakshan</option>
<option value="2">Udara</option>
<option value="3">Devmini</option>
<option value="4">Nimasha</option>
</select>
<div id="overlay"></div>
</div>
 |
| Figure 1: HTML file view |
Then we have to add following CSS and JavaScript in to HTML to archive our target.
Javascript
var button = document.getElementById('enbDesBtn'),
cars = document.getElementById('passengers'),
overlay = document.getElementById('overlay');
button.addEventListener('click', function () {
cars.disabled = !cars.disabled;
var value="";
if (cars.disabled) {
button.textContent = 'Enable';
value = 'Disable';
} else {
button.textContent = 'Disable';
value = 'Enable';
}
alert(value);
}, true);
cars.addEventListener('change', function (evt) {
console.log(evt.target.value);
}, true);
overlay.addEventListener('click', function () {
alert('Disabled');
}, true);
CSS
#wrapper {
display:inline-block;
position:relative;
}
#overlay {
display:none;
width:100%;
height:100%;
position:absolute;
top:0
left:0;
bottom:0;
right:0;
}
#passengers:disabled + #overlay {
display:block;
}
After adding above CSS and Javascripts in to HTML whole file will be similar to following.
<html>
<head>
<script>
window.onload=function(){
var button = document.getElementById('enbDesBtn'),
cars = document.getElementById('passengers'),
overlay = document.getElementById('overlay');
button.addEventListener('click', function () {
cars.disabled = !cars.disabled;
var value="";
if (cars.disabled) {
button.textContent = 'Enable';
value = 'Disable';
} else {
button.textContent = 'Disable';
value = 'Enable';
}
alert(value);
}, true);
cars.addEventListener('change', function (evt) {
console.log(evt.target.value);
}, true);
overlay.addEventListener('click', function () {
alert('Disabled');
}, true);
}
</script>
<style>
#wrapper {
display:inline-block;
position:relative;
}
#overlay {
display:none;
width:100%;
height:100%;
position:absolute;
top:0
left:0;
bottom:0;
right:0;
}
#passengers:disabled + #overlay {
display:block;
}
</style>
</head>
<body>
<button id="enbDesBtn">Enable Passengers</button>
<div id="wrapper">
<select id="passengers" disabled>
<option value="1">Lakshan</option>
<option value="2">Udara</option>
<option value="3">Devmini</option>
<option value="4">Nimasha</option>
</select>
<div id="overlay"></div>
</div>
</body>
</html>
As above example shows this functionality can be integrate with any other kind of HTML elements such as input fields, radio buttons etc.
