As someone who is new to front-end technologies, I am trying to achieve the following. Despite my efforts to find a solution, I have not been successful so far. Here is the issue I am facing-- I have two master checkboxes labeled 1) I do not like numbers 2) I do not like alphabets (both are styled using font-awesome 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 labeled 1, 2, 3, 4 and 5. When the checkbox with label id="label-numbers" is checked, these five checkboxes become disabled. Similarly, we have five checkboxes labeled a, b, c, d and e. When the checkbox with label id="label-alphabets" is checked, these five checkboxes become disabled. All of these checkboxes should use font-awesome icons. I was successful in achieving this with normal checkboxes, but I am facing a challenge with font-awesome checkboxes.
Edit: I am seeking assistance with the code from someone. Here is the link: https://jsfiddle.net/ankit1191/wb4snfm6/45/ When the checkbox 'I do not like numbers' is checked, checkbox '1' becomes disabled. When unchecked, checkbox '1' returns to its normal state.