Drop down with checkboxes

A drop down field with checkboxes. User needs to select at least one. Default is all checkboxes selected.

HTML

<div id="tournament-element" class="checkbox-drop-down-element">

                                <a id="tournament-label" class="checkbox-drop-down-label option" data-value="2" data-source="2">
                                    Tournament 
                                    <input type="text" id="tournament-all-selected" class="checkbox-drop-down-tick-sign" value="&#x2714;" maxlength="3" size="3" disabled>
                                    <input type="text" id="tournament-count" class="checkbox-drop-down-count" maxlength="3" size="3" disabled> 
                                    &#x25BC; <!-- down arrow -->
                                </a>

                                <div id="tournament-options" class="checkbox-drop-down-options">
                                      <label style="cursor:pointer"><input type="checkbox" class="tournament-option" checked>Tournament 1</label><br/>
                                      <label style="cursor:pointer"><input type="checkbox" class="tournament-option" checked>Tournament 2</label><br/>
                                      <label style="cursor:pointer"><input type="checkbox" class="tournament-option" checked>Tournament 3</label><br/>
                                      <label style="cursor:pointer"><input type="checkbox" class="tournament-option" checked>Tournament 4</label><br/>
                                      <label style="cursor:pointer"><input type="checkbox" class="tournament-option" checked>Tournament 5</label><br/>
                                </div>

                                <div id="tournament-alert" class="" style=" background-color: #f2dede; border-color: #ebccd1; color: #a94442; display: none; padding: 4px; border-radius: 3px;">
                                    <b>Hold on!</b> You need to select at least one tournament ;)
                                </div>

                            </div>

CSS

checkbox-drop-down-label  {
            cursor:pointer; 
            background-color: white; 
            border: 1px solid;
            border-color: gray;
            border-radius: 1px; 
            margin-top: 0.25em;   
        }

        .checkbox-drop-down-element {
            position: absolute;
        }

        .checkbox-drop-down-tick-sign {
            border: none; 
            width: 13px;
            height: 14px; 
            border-radius: 9px; 
            display:none;  
            margin-top: 0.1em;
        }

        .checkbox-drop-down-count {
            border: none; 
            width: 15px;
            height: 15px; 
            border-radius: 9px; 
            background-color: #999; 
            color:white; 
            display:none; 
            margin-top: 0.1em;    
        }

        .checkbox-drop-down-options {
            width: 9em; 
            background-color: #ecf0f1; 
            position: relative; 
            z-index: 100; 
            color: #7f8c8d; 
            display: none;
        }

JavaScript

$('#tournament-label').click(function () {
        
        if($('#tournament-options').css('display') === 'none') {
            $('#tournament-options').slideDown('fast');
        } else {
            $('#tournament-options').slideUp('fast');
        }
    }); 

    $(document).mouseup(function (e)
    {
        var container = $('#tournament-options');

        if (!container.is(e.target) && container.has(e.target).length === 0) {
            $('#tournament-alert').hide();
            container.slideUp('fast');
        }
    });

    $('.tournament-option').click(function () {

        var checkedOptionCount = $('#tournament-options :checkbox:checked').length;
        var totalOptionCount = $('#tournament-options :checkbox').length;

        console.log(checkedOptionCount);

        if (checkedOptionCount === 0) {
            $(this).prop('checked', true);
            $('#tournament-alert').show()
        } else {
            $('#tournament-alert').hide()
            $('#tournament-count').show();

            if (checkedOptionCount === totalOptionCount) {
                $('#tournament-count').hide();
                $('#tournament-all-selected').show();
            } else {
                $('#tournament-all-selected').hide();
                $('#tournament-count').val(" " + checkedOptionCount);
            }
        }
    });