How to simplify javascript "getElementByid"

Question

I was wondering if it is possible to simplify this instruction when clicking on imputs. I can put input-smtpname, input-smtplogin.... etc...?

document.getElementById('customSwitch1').onchange = function() {
    document.getElementById('input-smtpname').disabled = !this.checked;
    document.getElementById('input-smtplogin').disabled = !this.checked;
    document.getElementById('input-smtp').disabled = !this.checked;
    document.getElementById('input-smtpport').disabled = !this.checked;
    document.getElementById('input-smtpass').disabled = !this.checked;
    document.getElementById('input-smtpssl').disabled = !this.checked;
};

Answer 1

You can define an array with the ids of the elements that should be affected, and make a cycle that toggle for each of them, example:

// Supondo que todos os elementos tenham "input-" como prefixo
const elementIds = ['smtpname', 'smtplogin', 'smtp', 'smtpport', 'smtpass', 'smtpssl'];

for(let el of elementIds){
  let id = `input-${el}`;
  let element = document.getElementById(id);

  element.disabled = !element.checked;
}

You can also define a function and pass the elements it should iterate as an array as follows:

function toggleElements(...ids){
  for(let el of ids){
    let id = `input-${el}`;
    let element = document.getElementById(id);

    element.disabled = !element.checked;
  }
}

And then pass the elements to be updated to the same as follows:

toggleElements('smtpname', 'smtplogin', ...)

Answer 2

Yes, you can put input-***** or Inp-***, alias will facilitate code simplification

input[id^="input-"] selects the inputs that have the id with a value that starts exactly with a given string, in the case, input- see here

With just one line of code and jquery solves your problem

document.getElementById('customSwitch1').onchange = function() {

 $('input[id^="input-"]').prop("disabled", !$('input[id^="input-"]').prop("disabled"));

       /* ############### bonus ############### */
       if($('#customSwitch1').prop("checked")){
         $("#label").text("Desabilitar");
       }else{
         $("#label").text("Habilitar");
       }
      /* ##################################### */

};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="customSwitch1" name="check" value="true">
<label id="label" for="check">Habilitar</label><br>

  <input id="input-name" type="text" disabled>
  <input id="input-email" type="text" disabled>
  <input id="input-cpf" type="text" disabled>
  <input id="input-telefone" type="text" disabled>
  <input id="input-tantofaz" type="text" disabled>

Answer 3

See if this makes sense to your case.

We create a small function that takes all inputs for type, and scans all of them enabling and disabling according to the checkbox, in this way, we do not take into consideration the ids.

const check = document.querySelector('#check');
const form = document.querySelector('#form');
const inputs = form.querySelectorAll("input");

check.addEventListener('change', event => {
  if(event.target.checked === true) {
    habilitar(true)
  } else {
    habilitar(false)
  }
})


const habilitar = (value) => {
  inputs.forEach(input => {
    input.disabled = value;
  })
}

<input type="checkbox" id="check" name="check" value="true">
<label for="check">Habilitar</label><br>
<form id="form">
  <input id="input-name" type="text">
  <input id="input-email" type="text">
  <input id="input-cpf" type="text">
  <input id="input-telefone" type="text">
  <input id="input-tantofaz" type="text">
</form>

Answer 4

There is no native shortcut, a suggestion would be to create an alias for the functions querySelector and querySelectorAll just like browser debug tools do:

const $  = document.querySelector;
const $$ = document.querySelectorAll;

This way you could search the elements of your page with a syntax similar to jQuery:

$('#customSwitch1').onchange = function() {
    $('#input-smtpname').disabled = !this.checked;
    $('#input-smtplogin').disabled = !this.checked;
    $('#input-smtp').disabled = !this.checked;
    $('#input-smtpport').disabled = !this.checked;
    $('#input-smtpass').disabled = !this.checked;
    $('#input-smtpssl').disabled = !this.checked;
};

Or

$('#customSwitch1').onchange = function() {
    const elementos = $$('#input-smtpname, #input-smtplogin, #input-smtp, #input-smtpport, #input-smtpass, #input-smtpssl');
    for (const e of elementos) e.disabled = !this.checked;
};

But that’s a subjective solution to something that’s not even a problem, that honestly, I don’t even know if it fits the site scope.