Switch 3 status done in css, how can I disable the options?

Question

I have the following code:

.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>

This code makes a 3 status switch, where the user can select any of the options, however I need to disable the 3 switch options, preventing the user to click on them and change the status of the switch.

Since swicth was done in css, I’m not able to implement what I need, does anyone have any idea?

UPDATE

I ended up not giving so many details because I thought q would not be necessary, but the moment I should disable the options, should come from a click on a button, IE, when I click on a button, the switch should be disable in all options.

Answer 1

If I understand correctly, after the user click, you need to disable so that it is not possible to change, correct? If that’s it, you certainly need Javascript hehe the secret will be to add the property disabled in its inputs radio

would be something like that using 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)
})

You can test the result here in jsbin https://jsbin.com/yuqivayiku/edit?html,js,output

Answer 2

One way to do what you want is by using the CSS property Pointer-Events, with it basically you can manipulate mouse actions in HTML elements, more explanations inserted in the code:

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>

Answer 3

I made a slightly different example, put in your css:

select[readonly] {

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

pointer-events: none;

touch-action: none;
}

And in HTML like this:

 <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>