JSFiddle - React, Tailwind, and code Playground

by Florian Bar

HTML

<div class="form-group">
                                                    							<input type="checkbox" user-create-roles="" value="1" name="assignees_roles[]" id="role-1"> 
                                <label for="role-1">Administrator</label><br>
                            							<input type="checkbox" user-create-roles="" value="2" name="assignees_roles[]" id="role-2"> 
                                <label for="role-2">Editor</label><br>
                            							<input type="checkbox" user-create-roles="" value="3" name="assignees_roles[]" id="role-3"> 
                                <label for="role-3">Reporting</label><br>
                            							<input type="checkbox" user-create-roles="" value="4" name="assignees_roles[]" id="role-4" checked=""> 
                                <label for="role-4">Customer</label><br>
                                                                        </div>

JavaScript

$(function() {

	$('[user-create-roles]').click(function() {
        
        var val = $(this).val() - 1;
        var isChecked = $(this).prop("checked");
        
        $("[user-create-roles]").each(function(index) {

            if (index >= val && isChecked) {
                $(this).prop("checked", true);
            }

            if (index > 0) {
                var isPreviousChecked = $("[user-create-roles]").eq(index-1).prop("checked");

                if (isPreviousChecked && !isChecked) {
                    $(this).prop("checked", true);
                }
            }

            //user cannot uncheck customer checkbox
            if (index == 3 && !isChecked) {
                $(this).prop("checked", true);
            }
            
        });
    });

});