JSFiddle - React, Tailwind, and code Playground

by Nirmal Balasooriya

HTML

<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>

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;
}

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 = 'Enable';
    } else {
        button.textContent = 'Disable';
        value = 'Disable';
    }
    alert(value);
}, true);

cars.addEventListener('change', function (evt) {
    console.log(evt.target.value);
}, true);

overlay.addEventListener('click', function () {
    alert('Disabled');
}, true);