Enable and disable fields by clicking checked

Asked

Viewed 5,959 times

0

Colleagues.

I have a field that I need to enable and disable by clicking on a checked. See:

inserir a descrição da imagem aqui

When I click checked, I can disable, but when I uncheck, the field is still disabled. I am doing so:

JAVASCRIPT

<script type="text/javascript">
    function desabilitar(valor){
      if(valor == 'sim'){
       document.getElementById('tel').disabled = true;
     }else{
        document.getElementById('tel').disabled = false;
     }
    }
    </script>

HTML

<div class="form-group">
<label for="NomeEscola" style="font-weight: normal">Telefone Residencial: 
<input type="checkbox" onclick="desabilitar('sim')"> O mesmo do aluno</label>
<div class="input-group">
   <div class="input-group-addon" style="background-color: #FAFAFA">
      <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
   </div>
   <input type="text" class="form-control" name="TelefoneResidencial" id="tel" data-inputmask="'alias': '(99)9999-9999'" maxlength="150">
</div>

javascript
  • 1

    The problem is that at the checkbox click you always pass as "yes". onclick="disable('yes')". Whether he’s marked or not, he’ll always be yes and disable. Check if the field is disabled, if yes, you uncheck, otherwise check.

2 answers

2


I put an example below your code with the correct logic. This way it works as you wish.

The problem is that at the click of checkbox you always pass as "yes". onclick="desabilitar('sim'). Whether he’s marked or not, he’ll always be yes and disable. Check if the field is disabled, if yes, you uncheck, otherwise check.

function desabilitar(valor) {
  var status = document.getElementById('tel').disabled;

  if (valor == 'sim' && !status) {
    document.getElementById('tel').disabled = true;
  } else {
    document.getElementById('tel').disabled = false;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">
  <label for="NomeEscola" style="font-weight: normal">Telefone Residencial: 
<input type="checkbox" onclick="desabilitar('sim')"> O mesmo do aluno</label>
  <div class="input-group">
    <div class="input-group-addon" style="background-color: #FAFAFA">
      <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
    </div>
    <input type="text" class="form-control" name="TelefoneResidencial" id="tel" data-inputmask="'alias': '(99)9999-9999'" maxlength="150">
  </div>

  • Thank you Bruno.

1

You have to use the .checked of that checkbox for the purpose you want. Pass only the sim never allows the state "no".

Suggestion:

HTML:

onclick="desabilitar(this.checked)"

Javascript:

function desabilitar(selecionado) {
    document.getElementById('tel').disabled = selecionado;
}

Working example:

<div class="form-group">
  <label for="NomeEscola" style="font-weight: normal">Telefone Residencial: 
<input type="checkbox" onclick="desabilitar(this.checked)"/> O mesmo do aluno</label>
  <div class="input-group">
    <div class="input-group-addon" style="background-color: #FAFAFA">
      <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
    </div>
    <input type="text" class="form-control" name="TelefoneResidencial" id="tel" data-inputmask="'alias': '(99)9999-9999'" maxlength="150" />
  </div>
</div>
<script type="text/javascript">
  function desabilitar(selecionado) {
    document.getElementById('tel').disabled = selecionado;
  }
</script>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.