How to deactivate functionality of a aui:checkbox label?

Question

Iam creating checkboxes through a loop (see picture).

<%for(String s : mSeriesIDs_cfg) { %>  
<aui:input type="checkbox" name="checkboxGroup" label="<%=s%>" value="<%=GetterUtil.getString(portletPreferences.getValue(s, defaultSerieConfig))%>" />
<%} %>

The checkboxes itself are working correctly, but if I click on a label(name) of a checkbox, the first checkbox gets activated/deactivated (in the picture, if I click on the name 'Messreihe4', the first checkbox change to unchecked). How can I stop the functionality of this?

Answer 1

follow these:

(1) Create the checkbox with no label.

(2) Add text to right of checkbox (in textbox or otherwise)

(3) Now align them next to each other

(4) This should now remove that functionality.

---

(Note this is a jsfiddle example, but a similar design/implementation should also work for jsp)

so;

<input type="checkbox" /><a>Label 1</a>
      ^                      ^
      |                      |
  checkbox with no label     |
                             |
               single label placed next to checkbox