Disabling checkboxes created using font-awesome

I am new to front-end technologies and want to achieve the below. I tried finding a solution but none has helped me till now. My problem goes like this-- Suppose I have 2 master checkboxes labelled 1) I do not like numbers 2) I do not like alphabets (both are using font-awesome styled checkboxes)

<div class="x-form-cb-li select-option2">
<input type="checkbox" name="brands" id="no-brand" style="display: none;">
<i class="fa fa-square-o"></i>
<i class="fa fa-check-square-o" style="display: none; color:#228B22;"></i>
<label id="label-numbers" for="none" class="x-form-cb-label">I do not like numbers</label>
<label id="label-alphabets" for="none" class="x-form-cb-label">I do not like alphabets</label>

We have five checkboxes labelled 1, 2, 3, 4 and 5 and when checkbox with label id="label-numbers" is checked these five checkboxes get disabled. Similarly, we have five checkboxes labelled a, b, c, d and e and when checkbox with label id="label-alphabets" is checked these five checkboxes get disabled. All these should use font-awesome icons. I was able to achieve this with normal checkboxes but am getting stuck with font-awesome ones.