选中复选框时禁用输入

Question

I need to disable a cmp when a checkbox is checked, I tried this:

 <script language="text/javascript"> var x = document.getElementById("SemPretencao").checked; function desativar() { if (x==true) { alert("Seu Babacaum"); document.getElementById("salario").disabled=true; } else { alert("Babaquara"); document.getElementById("salario").disabled=false; } } document.getElementById("SemPretencao").addEventListener("click", desativar();, false); </script> inputs: <a class="field_names">Pretenção Salarial: </a> <input type="number" class="number_inputs" name="salario" id="salario"> <br> <a class="field_names">Não Tenho Pretenção Salarial </a> <input type="checkbox" class="checkbox_input" name="SemPretencao" id="SemPretencao"> 

Sorry for my English, I'm Brazilian.

Answer 1

Your addEventListener is wrong. You're calling the function instead of passing it. Your function can also be simplified a bit. Try this:

function desativar() {
  document.getElementById("salario").disabled = document.getElementById("SemPretencao").checked;
}

document.getElementById("SemPretencao").addEventListener("click", desativar, false);

Working example

Answer 2

I found some issues in your code. The x definition should have been inside the function. The eventListener was messing, it should have listen for the change event. I put this listener inside the HTML element (subject to debate, but working).

 function desativar() { var x = document.getElementById("SemPretencao").checked; if (x==true) { alert("Seu Babacaum"); document.getElementById("salario").disabled=true; } else { alert("Babaquara"); document.getElementById("salario").disabled=false; } } 

  <a class="field_names">Pretenção Salarial: </a> <input type="number" class="number_inputs" name="salario" id="salario"> <br> <a class="field_names">Não Tenho Pretenção Salarial </a> <input type="checkbox" class="checkbox_input" name="SemPretencao" id="SemPretencao" onchange="desativar()"> 

Answer 3

Just change your "click" event to change, remove the parentheses after desativar , and move the x variable inside the function :

function desativar() {
    var x = document.getElementById("SemPretencao").checked;
    if (x==true) {
        alert("Seu Babacaum");
        document.getElementById("salario").disabled=true;
    } else {
        alert("Babaquara");
        document.getElementById("salario").disabled=false;
    }

}

document.getElementById("SemPretencao")
 .addEventListener("change", desativar, false);