Checkbox, don't allow it to be checked

I've got a check box designed and styled like this:

<div class='checkbox'>
    <label for="test">
    <div class="switch">
        <input type="checkbox" name='test' id='test' value="1"/>
        <div class="slider"></div>
    </div>
    </label>
</div>

When the user clicks on the checkbox, I'm calling an external page and getting a return value. If the value <= 0 then I need to stop the checkbox being checked.

This the Jquery I'm using that doesn't work..

$("body").on('change', '#test', function(){
    var check = $(this).attr('id')
    if (document.getElementById(check).checked) {
        $.ajax({ type: "GET",   
            url: "do.php?mode=check=" + check,   
            async: true,
            success : function(text) {
            console.log (text)
            if (text === '0') 
                $('#test').attr('checked', false);
            }   
        });
    }
})

FIDDLE

How can I update the styled checkbox so it is unchecked and shows as unchecked onscreen ?

Thanks