1

Eu tenho o seguinte código:

.switch-toggle {
   float: left;
   background: #242729;
}
.switch-toggle input {
  position: absolute;
  opacity: 0;
}
.switch-toggle input + label {
  padding: 7px;
  float:left;
  color: #fff;
  cursor: pointer;
}
.switch-toggle input:checked + label {
  background: green;
}
<div class="switch-toggle switch-3 switch-candy">

  <input id="on" name="state-d" type="radio" checked="" />
  <label for="on" onclick="">ON</label>

  <input id="na" name="state-d" type="radio" checked="checked" />
  <label for="na" class="disabled" onclick="">N/A</label>

  <input id="off" name="state-d" type="radio" />
  <label for="off" onclick="">OFF</label>

</div>

Esse código faz um switch de 3 status, onde o usuário pode selecionar qualquer uma das opções, porem eu preciso dar um disable nas 3 opções do switch, impedindo que o usuário possa clicar nelas e trocar o status dela.

Como o swicth foi feito em css, não estou conseguindo implementar o que eu preciso, alguém tem alguma idéia?

UPDATE

Acabei não dando tantos detalhes pq achei q não ia ser necessário, mas o momento que devo desabilitar as opções, deverá vir de um click em um botão, ou seja, quando eu clico em um botão, o switch deve ficar disable em todas as opçãoes.

4
  • Mas para que quer retirar a função para que eles foram criados ou em que momento deseja desabilitar os mesmos?
    – LeAndrade
    Commented 5/05/2020 às 18:34
  • @LeAndrade editei a pergunta.
    – Renan
    Commented 5/05/2020 às 18:47
  • 1
    E não pretende habilitá-los mais?
    – LeAndrade
    Commented 5/05/2020 às 18:49
  • @LeAndrade Obrigado pela sua preocupação. Na vdd eu terei q habilitar depois novamente, o botão que ira habilitar/desabilitar será true/false, esse botão é outro switch só q é de duas opções, a questão mesmo é como desabilitar o switch sendo q foi feito em css, se quiser propor de forma completa agradeço
    – Renan
    Commented 5/05/2020 às 19:00

3 Respostas 3

1

Uma maneira de fazer o que quer é utilizando a propriedade CSS pointer-events, com ela basicamente você consegue manipular ações do mouse em elementos Html, mais explicações inseridas no código:

let labels = document.querySelectorAll('label');
let radios = document.querySelectorAll('input');
let booleano = false;      // variável booleana para controlar o botão 

function desabilitaHabilita() {
  booleano = !booleano;    // negação do valor no momento do clique
  for (let i = 0; i < labels.length; i++) {
    if(booleano) {
      labels[i].style.pointerEvents = 'none'; // se botão clicado desabilita o clique
      radios[i].style.pointerEvents = 'none';
    } else {
      labels[i].style.pointerEvents = 'auto'; // senão habilita novamente o clique
      radios[i].style.pointerEvents = 'auto';
    }
  }
}

document.getElementsByTagName('button')[0].addEventListener('click', desabilitaHabilita)
.switch-toggle {
  float: left;
  background: #242729;
}

.switch-toggle input {
  position: absolute;
  opacity: 0;
}

.switch-toggle input+label {
  padding: 7px;
  float: left;
  color: #fff;
  cursor: pointer;
}

.switch-toggle input:checked+label {
  background: green;
}
<div class="switch-toggle switch-3 switch-candy">

  <input id="on" name="state-d" type="radio" checked="" />
  <label for="on" onclick="">ON</label>

  <input id="na" name="state-d" type="radio" checked="checked" />
  <label for="na" class="disabled" onclick="">N/A</label>

  <input id="off" name="state-d" type="radio" />
  <label for="off" onclick="">OFF</label>

</div> <br><br>

<button>Desabilita/Habilita</button>

2
  • Muito obrigado pela ajuda.
    – Renan
    Commented 5/05/2020 às 19:27
  • 1
    Falou man, sucesso aí!
    – LeAndrade
    Commented 5/05/2020 às 19:28
1

Se eu entendi bem, após o click do usuário, você precisa desabilitar pra não ser possível mudar, correto ? Se for isso, você certamente precisa de JavaScript hehe o segredo vai ser adicionar a propriedade disabled nos seus inputs radio

seria algo mais ou menos assim usando jQuery

// pega os inputs radio
let options = $('#switch input[type=radio]')

// ouve o click e desabilita todos ao clicar em algum
options.on('click', event => {
  let clicado = event.currentTarget.id; // "on", "off" ou "na"
  options.attr('disabled', true)
})

Você pode testar o resultado aqui no jsbin https://jsbin.com/yuqivayiku/edit?html,js,output

1
  • 1
    Sua resposta foi muito útil para mim, muito obrigado.
    – Renan
    Commented 5/05/2020 às 19:28
0

Fiz um exemplo um pouco diferente, coloque em seu css:

select[readonly] {

background: #eee; /*Simular campo como desativado */

pointer-events: none;

touch-action: none;
}

E no HTML assim:

 <select readonly="readonly" tabindex="-1" aria-disabled="true">
 <option value=""></option>
 <option value="1" selected>Cliente</option>
 <option value="2">Contador</option>
 <option value="3">Vendedor</option>
 </select>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .