Disable/Enable Dropdown with javascript

Hello,

I'm developing a mobile app and I need a function in JS that disable or enable all the dropdowns that I have in one page. My ideia is use a bool as entrance parameter and with that control what I want.


For that I'm using this code


var inputs = document.getElementsByClassName('dropdown-container');

if($parameters.IsActive){
   
    /* Ativa tudo */
    inputs.forEach(function(input){
        input.setAttribute('enable', true);
    });

}else{
   
    /* Desactiva tudo */
    inputs.forEach(function(input){
         input.setAttribute('disabled', true);
    });
}


I use the same code to disable and enable inputs only change var to 

var inputs = document.querySelectorAll('input[type="text"], input[type="checkbox"], input[type="number"], input[type="tel"]');

and work well but with dropdowns isn't, it seems that I can catch the dropdown.


I try put document.getElementsByClassName('dropdown-container') on google's console and there I can catch the page dropdowns so I don't understand what i'm doing wrong.



Hello Hugo, can't you achieve what you want by using the isActive parameter in the Enabled property of every input?


I'm all for using JS to introduce non-existant functionality but you seem to want something that is an out-of-the-box feature.

Hi,

For inputs it's works fine for drops is my problem. The isActive is only for use the same JS in both cases (Enable/Disable).  If is easiest I can ignore that parameter and use only this. I can put 1 var in each input and drop enable property but its a lot of forms and some with other validations so isn't the best. So I decided try this way.


var inputs = document.getElementsByClassName('dropdown-container');

 inputs.forEach(function(input){
        input.setAttribute('enable', true);
 });

Maybe I'm not understanding your use case, but it seems you have an external condition, and based on that condition you want to set inputs/combos as enabled or disabled, to do that you can just use the input IsActive in the input Enabled property, like so:

I'm know that I can make this with enabled property, but in this case I have other condition that property, have a lot of drops and for the logic that I need with JS makes more sense to me so I decided try it. But it seems that is not possible do that.  

You can add this condition on top of the other one with an AND clause.


I now get that you're trying to have a more mantainable solution with no need to add new code whenever an input is added to a page. If this is the case, it's certainly possible, but OS might have some logic to disable the combos that you are not mimicking, you need to dive deeper into the disable mechanism and then reproduce it on your javascript.


Solution

Solved this is the workaround that I use.

Javascript function:

function myDisable(){
    var elements = document.querySelectorAll('.dropdown-display');
    
    elements.forEach(function(element){
       element.classList.add('toDisable');
    });
}

myDisable();


CSS:


.toDisable{
    background-color: #dfe0e0 !important;
    pointer-events: none; /* não reagir a qualquer evento de rato como arrastar, clique etc */
}


With this I can "block" the event click on dropdowns 

Solution