OHope OHope - 2 years ago 1328
Javascript Question

3 State CSS Toggle Switch

I have been looking around for a 3 state toggle switch but haven't had much luck.

Basically I need a switch that has the states:
| ON | N/A | OFF |

The slider by default starts in the middle, and once the user slides to left or right, they can't go back to the N/A (not answered) state.

Anyone have any idea on how to handle this?

Answer Source

Try something like this:

<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" onclick="">N/A</label>

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


This will start with N/A as the default option (via checked="checked"), but make it unselectable later (by using disabled)

JSFiddle Demo

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download