SWITCH COM VALUE ON | Bootstrap: velocidade no front-end

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

Referente ao curso Bootstrap: velocidade no front-end

por Natan Gabriel Lara de Souza

| 96.2k xp | 37 posts

Programador Front-End

Bom dia, estou com um problema com o meu check switch. eu preciso que quando ele esta com value "on" ou "true" ele faça algo e quando estiver com value "off" ou "false" me faça outra coisa, só que ele sempre me retorna o value de "on"

 <div class="col-9 mr-3">
                    <input type="text" name="inscricao" id="myDIV" class="form-control custom-control" onkeyup="this.value = this.value.toUpperCase();" placeholder="inscrição estadual">

                  </div>
                  <div class="form-check col p-0 mt-1">
                    <div class="custom-control custom-switch">
                      <input type="checkbox" class="custom-control-input" id="isento"
                      onclick="myFunction();">
                      <label class="custom-control-label" for="isento">isento</label>
                    </div>
                  </div>

  <script>
    function myFunction() {
      var input = document.querySelector("#myDIV");
      var i = document.querySelector("#isento").value;
      console.log(i);

      if(i == "on"){
        input.setAttribute("disabled", "disabled");
        input.removeAttribute("required");
      }else{
        input.removeAttribute("disabled");
        input.setAttribute("required", "required");
      }



    }
  </script>

3 respostas

solução!

por André Victor Ruiz Pedroso

| 2101.7k xp | 3838 posts

Moderador Analista Pleno

25/03/2019

Oi Natan nesse caso você não vê o value mas sim a propriedade checked. Dá uma olhadinha no código:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <script>
        function myFunction() {
            var input = document.querySelector("#myDIV");
            var i = document.querySelector("#isento").checked;
            console.log(i);

            if (i) {
                input.setAttribute("disabled", "disabled");
                input.removeAttribute("required");
            } else {
                input.removeAttribute("disabled");
                input.setAttribute("required", "required");
            }



        }
    </script>
</head>

<body>
    <div class="col-9 mr-3">
        <input type="text" name="inscricao" id="myDIV" class="form-control custom-control"
            onkeyup="this.value = this.value.toUpperCase();" placeholder="inscrição estadual">

    </div>
    <div class="form-check col p-0 mt-1">
        <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="isento" onclick="myFunction();">
            <label class="custom-control-label" for="isento">isento</label>
        </div>
    </div>
</body>

</html>

Espero ter ajudado!!!

por Natan Gabriel Lara de Souza

| 96.2k xp | 37 posts

Programador Front-End

25/03/2019

Olá Andre, beleza,

Valeu pela ajuda, estava um tempão tentando resolver haha

por André Victor Ruiz Pedroso

| 2101.7k xp | 3838 posts

Moderador Analista Pleno

25/03/2019

Disponha e bons estudos!!!