Disable all the <select> items in JavaScript

Question

I have a few <select> s items in my JSP file, what I want is to disable all the <select> s items.

This is my JSP file:

<select id="comboSuperGrupos1" name="combosSupG">
    <option value="0">N...</option>
    <!-- X OPTIONS -->
</select>

<select id="comboSuperGrupos2" name="combosSupG">
    <option value="0">N...</option>
    <!-- X OPTIONS -->
</select>

This is what I'm trying:

var combosSuperGrupo = document.getElementsByName("combosSupG");
combosSuperGrupo.disabled = true;

But I can't achieve my goal. I'm thinking to do that with jQuery, but I don't know if I can mix JavaScript with jQuery.

Any question post on comments.

Answer 1

 const combosSuperGrupo = document.getElementsByName("combosSupG"); combosSuperGrupo.forEach(_ => _.disabled = true); 

 <select id="comboSuperGrupos1" name="combosSupG"> <option value="0">N...</option> <!-- X OPTIONS --> </select> <select id="comboSuperGrupos2" name="combosSupG"> <option value="0">N...</option> <!-- X OPTIONS --> </select> 

Answer 2

jQuery :

$('select[name="combosSupG"]').attr('disabled',true);

JavaScript :

var selects = document.querySelectorAll("select[name='combosSupG']");
selects.forEach(function(s){
    s.disabled = true;
});

Answer 3

Yes you can and it's easier to code:

This is how to disable every select with that name:

 $("select[name='combosSupG']").prop('disabled', true); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="comboSuperGrupos1" name="combosSupG"> <option value="0">N...</option> <!-- X OPTIONS --> </select> <select id="comboSuperGrupos2" name="combosSupG"> <option value="0">N...</option> <!-- X OPTIONS --> </select> 

This is how to disable every select in the page:

 $("select").prop('disabled', true); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="comboSuperGrupos1" name="combosSupG"> <option value="0">N...</option> <!-- X OPTIONS --> </select> <select id="comboSuperGrupos2" name="combosSupG"> <option value="0">N...</option> <!-- X OPTIONS --> </select>