How to disable field with Javascript?

Asked

Viewed 5,024 times

7

I own 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 am using this function 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 fix it? Thank you.

javascript ajax json

  • Is mixing Vanilla with jQuery pq?

  • I’ve tried my best, I’ve tried my best.

  • You who disable select by clicking the checkbox is this?

  • If true enables, if false disables.

  • Quote the disabled value

  • @Gabrielfernandes did not understand.

Show 1 more comment

4 answers

7


Solution using jquery:

First make sure you have added the jquery library to the head and then enter the javascript/jquery code, example:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="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 on 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>

  • It worked, thanks, this is just what I needed.

7

A leaner form just using the state itself of the checkbox: if he goes true (checked), the element is disabled; if checked false (unchecked), 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>
<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>

5

I think you must have gotten lost when you tried to mix 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>

<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" disabled>
        <option value="I">Irrelevante</option>
        <option value="E">Entrada</option>
        <option value="S">Saída</option>
    </select>
</div>

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 wouldn’t work, see if that’s it.

  • 1

    It doesn’t work that way.

Browser other questions tagged javascript ajax json

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