Cannot set multiple checkboxes jQuery

I thought this would take 10 mins - 2 hours later.

I am working on something that has a highly adaptive front end so am trying to set all parts of the page by jQuery. This means bits of the page can be updated either by user or by backend.

I am not very proficient in jQuery, I would rater have ugly, stupid code that I can understand than elegant solutions that confuse me a week later. I have seen elegant solutions here (I think) to this but nothing simple.

I had the devil's own job passing anything through as a variable for this bit and I ended up with php:

echo "var displayFri = '#fri'";
echo "var displaySat = '#sat'";
echo "var displaySun = '#sun'";

and jQuery

$(displayFri).prop('checked',true );
$(displaySat).prop('checked',true );
$(displaySun).prop('checked',true );

and HTML

<div class="col-xs-12 col-xs-12 col-md-12 col-lg-12 colFlush">
    <div class="btn-group-xs" role="group" data-toggle="buttons">
        <label class="btn btn-default">
            <span class="glyphicon glyphicon-unchecked"></span>
            <input type="checkbox" class="workDay day"
                   value="1"
                   id="mon" name="mon"> Mon

        </label>

        <label class="btn btn-default">
            <span class="glyphicon glyphicon-unchecked"></span>
            <input type="checkbox" class="workDay day"
                   value="1"
                   id="tue" name="tue"> Tue
        </label>... etc

What I cannot understand is only one box can be set to checked at a time. If I try two NONE of them check. This is a checkbox not a radiobutton.

To explain each of these PHP lines will be in an if statement. Individual inputs have ids like "wed".

Bemused.