Edit in JSFiddle

<div class="c-switch">
    <input type="hidden" name="active" value="">
    <input id="active-disabled" class="c-switch__input c-switch__disabled" type="radio" name="active" value="disabled">
    <label class="c-switch__label" for="active-disabled">
        <span class="c-switch__label-text">Enabled</span>
    </label>

    <input id="active-enabled" class="c-switch__input c-switch__enabled" type="radio" name="active" value="enabled" checked>
    <label class="c-switch__label" for="active-enabled">
        <span class="c-switch__label-text">Disabled</span>
    </label>

    <span class="c-switch__toggle"></span>
</div>


<div class="c-switch is-disabled">
    <input type="hidden" name="disabled" value="">
    <input id="disabled-disabled" class="c-switch__input c-switch__disabled" type="radio" name="disabled" value="disabled" disabled>
    <label class="c-switch__label" for="disabled-disabled">
        <span class="c-switch__label-text">Enabled</span>
    </label>

    <input id="disabled-enabled" class="c-switch__input c-switch__enabled" type="radio" name="disabled" value="enabled" checked disabled>
    <label class="c-switch__label" for="disabled-enabled">
        <span class="c-switch__label-text">Disabled</span>
    </label>

    <span class="c-switch__toggle"></span>
</div>

* {
    box-sizing: border-box;
}

.c-switch {
    display: inline-flex;
    align-items: center;
    position: relative;
    background-color: #004e71;
    border: 2px solid #004e71;
    border-radius: 5px;
    font-size: 13px;

    &.is-disabled {
        background-color: #aaa;
        border-color: #aaa;
    }

    &__label {
        position: relative;
        padding: 5px 10px;
        color: #fff;
        cursor: pointer;
        z-index: 2;
        transition: all .3s ease-in-out;
        overflow: hidden;
    }

    &__toggle {
        display: inline-block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 50%;
        height: auto;
        background-color: #fff;
        border-radius: 3px;
        transition: all .3s ease-in-out;
        z-index: 1;
    }

    &__input {
        display: none;

        &:checked + .c-switch__label {
            visibility: hidden;
            z-index: 0;
        }

        &:checked.c-switch__disabled ~ .c-switch__toggle {
            left: 0;
        }

        &:checked.c-switch__enabled ~ .c-switch__toggle {
            left: 50%;
        }

        &:disabled {
            & ~ .c-switch__toggle {
                background-color: darken(#fff, 10%);
            }

            & + .c-switch__label {
                color: darken(#fff, 20%);
                cursor: default;
            }
        }
    }
}