javascript - 3 态 CSS 拨动开关

Question

我一直在寻找 3 态拨动开关，但运气不佳。

基本上我需要一个具有以下状态的开关: |开 |不适用 |关 |

slider 默认从中间开始，一旦用户向左或向右滑动，就无法回到N/A(未回答)状态。

有人知道如何处理这个吗？

Answer 1

尝试这样的事情:

.switch-toggle {
  width: 10em;
}

.switch-toggle label:not(.disabled) {
  cursor: pointer;
}

<link href="https://cdn.jsdelivr.net/css-toggle-switch/latest/toggle-switch.css" rel="stylesheet" />

<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" disabled checked="checked" />
  <label for="na" class="disabled" onclick="">&nbsp;</label>

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

  <a></a>
</div>

这将以 N/A 作为默认选项(通过 checked="checked")开始，但稍后使其不可选择(通过使用 disabled)

JSFiddle Demo (简体)