onclick event in disabled HTML element

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?

25 thoughts on “onclick event in disabled HTML element”

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

    Reply

Leave a Comment