Allow only one input checked on checkbox

I have a custom-styled checkboxes as below in the code:

<div class="checkbox col-md-5 col-md-offset-4">
                        <input type="checkbox" id="custom1" class="chk2" name="september">
                        <label for="custom1" id="fix1"><span></span>September 27<sup>th</sup>       
                        </label>
                        <input type="checkbox" id="custom3" class="chk4" name="october">
                        <label for="custom3" id="fix3"><span></span>October 4<sup>th</sup>                                                     </label>                                            </label>
                        <input type="checkbox" id="custom2" class="chk3" name="any">
                        <label for="custom2" id="fix2"><span></span>Either day is fine                                                     </label>
                    </div>

CSS:

#custom-checkbox, #custom1, #custom2, #custom3 {
    visibility: hidden;
}
#custom-checkbox + label span, #custom1 + label span, #custom2 + label span, #custom3 + label span {
    background: transparent none repeat scroll 0 0 !important;
    border: 1px solid white !important;
    box-sizing: border-box;
    display: inline-flex;
    line-height: 100%;
    background: transparent !important;
    line-height: 100%;
    border:1px solid white !important;
    height: 16px;
    margin: -1px 4px 0 0;
    vertical-align: sub;
    width: 17px;
}
#custom-checkbox:checked + label span::before, #custom1:checked + label span::before {
    color: white;
    content: "\f00c";
    display: block;
    font-family: FontAwesome;
    font-weight: bold;
    left: 17px;
    position: absolute;
    top: 2px;
}
#custom2:checked + label span::before {
    color: white;
    content: "\f00c";
    display: block;
    font-family: FontAwesome;
    font-weight: bold;
    left: 2px;
    position: relative;
    top: 1px;
    float: left;
    margin-inline-start: -1px !important;
}
#custom3:checked + label span::before {
    color: white;
    content: "\f00c";
    display: block;
    font-family: FontAwesome;
    font-weight: bold;
    margin-left: 1px;
    position: absolute;
    top: 2px;
}
#labelfix, #fix1, #fix2, #fix3 {
    padding-left: 0px !important;
}
#fix1 span {
    top: 5px !important;
}
#fix2 {
    float: right;
    display: inline-flex;
    position: relative;
    top: 0px;
    vertical-align: super;
}
#fix2 > span {
    position: absolute;
    right: 88px;
    top: 2px;
}
#fix1 {
    float: left;
}

What I want to make is, when one checkbox is :checked automatically all others have "X" on their fields. I did try the following:

var custom1Checked = $('#custom1:checked + label span::before');
var custom2Checked = $('#custom2:checked + label span::before');
var custom3Checked = $('#custom3:checked + label span::before');

if(custom1Checked.css('display') == 'block') {
     custom2Checked.css('content', '"\f00d "');
}

I'm guessing now, but I believe the content cannot be assigned like this with jQuery. Please note: "\f00d" is a FontAwesome icon.

I have tried with changing from checkbox to radio in input type but it didn't work. Probably because of custom checkboxes. On the other hand, when someone unchecked the field or clicks on the "X", I would like these fields to be reset.

How can this be done the best way?

Thanks guys.