JSFiddle - React, Tailwind, and code Playground

by Adam Poczatek

HTML

<p class="switch"> 
    <label class="cb-enable" for="checkbox2"><span>Yes</span></label>
    <label class="cb-disable selected" for="checkbox2"><span>No</span></label>
    <div><input type="checkbox" id="checkbox2" class="checkbox" name="notify_on_support" value="1" style="" /></div> 
    <label for="ticketreply" class="label" style="font-size:12px">Reply to support ticket</label><br />                    
    </p>

    <p class="switch"> 
    <label class="cb-enable" for="checkbox3"><span>Yes</span></label>
    <label class="cb-disable selected" for="checkbox3"><span>No</span></label>
    <div ><input type="checkbox" id="checkbox3" class="checkbox" name="notify_on_event" value="1" style="" /></div> 
    <label for="nevent" class="label" style="font-size:12px">New Events</label><br />
    </p>

    <p class="switch"> 
    <label class="cb-enable" for="checkbox4"><span>Yes</span></label>
    <label class="cb-disable selected" for="checkbox4"><span>No</span></label>
    <div ><input type="checkbox" id="checkbox4" class="checkbox" name="notify_on_pupdate" value="1" style="" /></div>
    <label for="pupdate" class="label" style="font-size:12px">Profile Update</label><br />                 
    </p>
</div>

JavaScript

$(document).ready( function(){ 
    $(".cb-enable").click(function(e){
        e.preventDefault();
        
        var id = $(this).attr("for");
        
        $(".cb-disable[for=" + id + "]").removeClass('selected');
        
        $(this).addClass('selected');
        
        $("#" + id).attr('checked', true);
    });
    
    $(".cb-disable").click(function(e){
        e.preventDefault();
        
        var id = $(this).attr("for");
        
        $(".cb-enable[for=" + id + "]").removeClass('selected');
        
        $(this).addClass('selected');
        
        $("#" + id).attr('checked', false);
    });
});