Enable and disable fields by clicking checked

Question

Enable and disable fields by clicking checked

Navigation

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

0

Colleagues.

I have a field that I need to enable and disable when I click on a checked. See:

WhenIclickchecked,Icandisableit,butwhenIuncheckit,thefieldisstilldisabled.I'mdoingitthisway:

JAVASCRIPT

<scripttype="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

asked by anonymous 21.06.2017 / 22:00

2 answers

1

You need to use .checked of this checkbox for the purpose you want. Passing only sim never allows the "no" state.

Tip:

HTML:

onclick="desabilitar(this.checked)"

JavaScript:

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

Example to work:

<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>

21.06.2017 / 22:05

How to get a value from a td from the column name add input in time format

score 2 · Accepted Answer

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

The problem is that in the checkbox click you always pass as "yes". onclick="desabilitar('sim') . Regardless of whether it is marked or not, it will always be yes and disable. Make the check if the field is disabled, if yes, you uncheck, otherwise mark.

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><divclass="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>