3状态CSS切换开关

作者

我一直在寻找一个3状态切换开关，但运气不太好

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

默认情况下，滑块从中间开始，一旦用户向左或向右滑动，它们就不能返回到N/A（未回答）状态。

有人知道怎么处理吗

试着这样做：

。开关切换{
宽度：10em；
}
.开关切换标签：未（.disabled）{
光标：指针；
}
&lt；链接href=”https://cdn.jsdelivr.net/css-toggle-switch/latest/toggle-switch.css“rel=”样式表“/&gt；
&lt；div class=“开关切换开关-3开关糖果”&gt；
&lt；输入id=“on”name=“state-d”type=“radio”选中=“”/>；
&lt；标签为=“on”onclick=“”&gt；ON&lt/标签&gt；
&lt；输入id=“na”name=“state-d”type=“radio”disabled checked=“checked”/gt；
&lt；标签为=“na”class=“disabled”onclick=“”&gt&amp；nbsp&lt/标签&gt；
&lt；输入id=“off”name=“state-d”type=“radio”/&gt；
&lt；标签为=“off”onclick=“”&gt；关&lt/标签&gt；
&lt；a&gt&lt/a&gt；
&lt/部门&gt

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

jsiddle演示（简化）

相关文章：

  1. 如何在jQuery中选择具有多个类的元素？
  2. 如何在jQuery中选择具有多个类的元素？
  3. 如何使用jQuery获取元素的ID？
  4. 在jQuery中删除事件处理程序的最佳方法是什么？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with