Enable select option with javascript/jquery

Question

I am developing a software, but I can not enable a select. The intention is when check the select enable automatically. How do I do it?

function habilitarSofa() {

  var radios = document.getElementsByName("sofa[]");
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      var checked_value = radios[i].value;
      if (checked_value == 'sofa[]' || checked_value == 'tempo') {
        document.getElementsByName('tempo-sofa').disabled = true;
      } else {
        document.getElementsByName('tempo-sofa').disabled = false;
      }
      break;
    }

  }
}

<center>

  <div>

    <br />
    <span class="name-item">sofá</span>
    <br />
    <form class="form-inline">
      <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
                    <input type="checkbox" class="custom-control-input" name="sofa[]" value="2" onclick="habilitarSofa()">
                    <span class="custom-control-indicator"></span>
                </label>
      <select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="inlineFormCustomSelect" name="tempo-sofa" disabled="disabled">
                    <option selected hidden>Selecione</option>
                    <option value="sofa-1">Menos de 6 meses</option>
                    <option value="sofa-2">De 6 meses a 2 anos</option>
                    <option value="sofa-3">Mais de 2 anos</option>
                </select>
    </form>
  </div>

</center>

Answer 1

If you are using jQuery, you can control by it more easily. Your javascript would look like this:

// verifica se o input checked foi clicado
$("input[name^='sofa']").on('click', function() {
  // verifica se esta "checado"
  if ($(this).is(":checked"))
    $("select[name='tempo-sofa']").prop("disabled", false); // habilita o select
  else
    $("select[name='tempo-sofa']").prop("disabled", true); // desabilita o select
});

Example in your code

$("input[name^='sofa']").on('click', function() {
  if ($(this).is(":checked"))
    $("select[name='tempo-sofa']").prop("disabled", false);
  else
    $("select[name='tempo-sofa']").prop("disabled", true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

  <br />
  <span class="name-item">sofá</span>
  <br />
  <form class="form-inline">
    <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
                    <input type="checkbox" class="custom-control-input" name="sofa[]" value="2">
                    <span class="custom-control-indicator"></span>
                </label>
    <select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="inlineFormCustomSelect" name="tempo-sofa" disabled="disabled">
                    <option selected hidden>Selecione</option>
                    <option value="sofa-1">Menos de 6 meses</option>
                    <option value="sofa-2">De 6 meses a 2 anos</option>
                    <option value="sofa-3">Mais de 2 anos</option>
                </select>
  </form>
</div>

Answer 2

Failed to add variable i of the loop for us document.getElementsByName within the if to select the index of the elements:

document.getElementsByName('tempo-sofa')[i].disabled = true;
document.getElementsByName('tempo-sofa')[i].disabled = false;

Behold:

function habilitarSofa() {

  var radios = document.getElementsByName("sofa[]");
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      var checked_value = radios[i].value;
      if (checked_value == 'sofa[]' || checked_value == 'tempo') {
        document.getElementsByName('tempo-sofa')[i].disabled = true;
      } else {
        document.getElementsByName('tempo-sofa')[i].disabled = false;
      }
      break;
    }

  }
}

<center>

  <div>

    <br />
    <span class="name-item">sofá</span>
    <br />
    <form class="form-inline">
      <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
                    <input type="checkbox" class="custom-control-input" name="sofa[]" value="2" onclick="habilitarSofa()">
                    <span class="custom-control-indicator"></span>
                </label>
      <select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="inlineFormCustomSelect" name="tempo-sofa" disabled="disabled">
                    <option selected hidden>Selecione</option>
                    <option value="sofa-1">Menos de 6 meses</option>
                    <option value="sofa-2">De 6 meses a 2 anos</option>
                    <option value="sofa-3">Mais de 2 anos</option>
                </select>
    </form>
  </div>

</center>