Enable select option with javascript / jquery

Question

Enable select option with javascript / jquery

Navigation

#1 by (4 votes)
#2 by (2 votes)

4

I'm developing software, but I can not enable a select. The intent is to check the select enable automatically. How do I do this?

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>

javascript jquery

asked by anonymous 18.12.2017 / 15:15

2 answers

4

If you're using jQuery, you can control 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/><spanclass="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>

18.12.2017 / 15:27

How to hide a text being bigger than my Div What is the need for an interface to have abstract methods?

score 2 · Accepted Answer

The variable i of the loop for in the document.getElementsByName within the if was missing to select the index of the elements:

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

See:

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>