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.