How to disable JavaScript field?

Question

How to disable JavaScript field?

Navigation

#1 by (7 votes)
#2 by (7 votes)
#3 by (5 votes)
#4 by (0 votes)

7

I have these HTML fields:

<div class="col-sm-6">
    <input asp-for="ConfiguracaoTecnibra.HabilitaTeclado" type="checkbox" id="cbHabilitarTeclado" onclick="HTeclado();" />
    <label class="control-label">Biometria</label>
</div>
<div class="col-sm-6">
    <label asp-for="ConfiguracaoTecnibra.SentidoTeclado" class="control-label"></label>
    <select asp-for="ConfiguracaoTecnibra.SentidoTeclado" id="cbSentidoTeclado" class="form-control">
        <option value="I">Irrelevante</option>
        <option value="E">Entrada</option>
        <option value="S">Saída</option>
    </select>
</div>

I'm using this function to be able to block the field, but it does not work:

function HTeclado() { 
    document.getElementById('cbSentidoTeclado').disabled = false;

    if ($("#cbHabilitarTeclado").prop('checked') == true) {
        $("#cbSentidoTeclado").prop("disabled", true); 
    }
    else { 
        $("#cbSentidoTeclado").prop("disabled", false);
    }
}

That way it's not working, how can I solve it? Thank you.

javascript ajax json

asked by anonymous 09.07.2018 / 22:18

4 answers

7

A leaner form only by using the state of checkbox : if it is true (checked), the element is disabled; if it is false (not checked), the element is enabled. A if in this case is expendable:

$(document).ready(function(){
   $("#cbHabilitarTeclado").on("click", function(){
      $("#cbSentidoTeclado")
      .prop("disabled", this.checked); 
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="col-sm-6">
  <input asp-for="ConfiguracaoTecnibra.HabilitaTeclado" type="checkbox" id="cbHabilitarTeclado" />
  <label class="control-label">Biometria</label>
</div>
<div class="col-sm-6">
  <label asp-for="ConfiguracaoTecnibra.SentidoTeclado" class="control-label"></label>
  <select asp-for="ConfiguracaoTecnibra.SentidoTeclado" id="cbSentidoTeclado" class="form-control">
      <option value="I">Irrelevante</option>
      <option value="E">Entrada</option>
      <option value="S">Saída</option>
  </select>
</div>

09.07.2018 / 23:34

5

I think you should have gotten lost when you tried to mix it up like I said Vanilla with jQuery.

function HTeclado() { 

    if ($("#cbHabilitarTeclado").prop('checked') == true) {
        $("#cbSentidoTeclado").prop("disabled", false); 
    }
    else { 
        $("#cbSentidoTeclado").prop("disabled", true);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="col-sm-6">
    <input asp-for="ConfiguracaoTecnibra.HabilitaTeclado" type="checkbox" id="cbHabilitarTeclado" onclick="HTeclado();" />
    <label class="control-label">Biometria</label>
</div>
<div class="col-sm-6">
    <label asp-for="ConfiguracaoTecnibra.SentidoTeclado" class="control-label"></label>
    <select asp-for="ConfiguracaoTecnibra.SentidoTeclado" id="cbSentidoTeclado" class="form-control" disabled>
        <option value="I">Irrelevante</option>
        <option value="E">Entrada</option>
        <option value="S">Saída</option>
    </select>
</div>

09.07.2018 / 22:30

0

    function HTeclado() { 
    document.getElementById('cbSentidoTeclado').disabled = false;

    if ($("#cbHabilitarTeclado").prop('checked') == true) {
        $("#cbSentidoTeclado option").prop("disabled", "true"); 
    }
    else { 
        $("#cbSentidoTeclado option").prop("disabled", "true");
    }
}

It worked when I put quotes in 'true' and 'false'. Without the quotes it did not work, see if that's it.

09.07.2018 / 22:33

Maximum amount of elements sent by a form? Reflection C #, how does it work?

score 7 · Accepted Answer

Solution using jquery:

First make sure you have added the jquery library in the head and then enter the javascript / jquery code, eg

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scripttype="text/javascript">
    $(document).ready(function(){
        $("#cbHabilitarTeclado").on("click", function(){
            if($(this).prop("checked")){
              $("#cbSentidoTeclado").prop("disabled", true); 
          }
          else{
              $("#cbSentidoTeclado").prop("disabled", false);
          }
        });
    });
    </script>
</head>

Your html in the body would look like this:

<body>
    <div class="col-sm-6">
        <input asp-for="ConfiguracaoTecnibra.HabilitaTeclado" type="checkbox" id="cbHabilitarTeclado" />
        <label class="control-label">Biometria</label>
    </div>
    <div class="col-sm-6">
        <label asp-for="ConfiguracaoTecnibra.SentidoTeclado" class="control-label"></label>
        <select asp-for="ConfiguracaoTecnibra.SentidoTeclado" id="cbSentidoTeclado" class="form-control">
            <option value="I">Irrelevante</option>
            <option value="E">Entrada</option>
            <option value="S">Saída</option>
        </select>
    </div>
</body>