Nicolas Raoul
Nicolas Raoul

Reputation: 60213

Clicking on label of Liferay AUI checkbox changes value of the preceding checkbox

I wrote this simple form in Liferay:

enter image description here

<aui:input type="checkbox" name="team" value="joe" label="joe" checked="false" />
<aui:input type="checkbox" name="team" value="ben" label="ben" checked="false" />

PROBLEM: When I click on the label "ben", the value of the joe checkbox changes.

Is my syntax incorrect?

Upvotes: 1

Views: 1763

Answers (2)

Faizul Sulaiman
Faizul Sulaiman

Reputation: 11

By default aui assign the name as id. So it is not unique and onclick triggers the wrong input id (which is the first input).

Just set a unique id to each input should works.

<aui:input id="chkbox1" type="checkbox" name="team" value="joe" label="joe" /> 
<aui:input id="chkbox2" type="checkbox" name="team" value="ben" label="ben" />

Upvotes: 1

Byran Zaugg
Byran Zaugg

Reputation: 957

No. name has to be unique for checkboxes, just like normal HTML.

<aui:input type="checkbox" name="teamAAA" value="joe" label="joe" checked="false" />
<aui:input type="checkbox" name="teamBBB" value="ben" label="ben" checked="false" />

Did you mean to use type radio? Those would need the same name.

<aui:input type="radio" name="team" value="joe" label="joe" checked="false" />
<aui:input type="radio" name="team" value="ben" label="ben" checked="false" />

Update:

<aui:input> will normalize name and id if id isn't explicitly passed. So in your code, but inputs have the same id, which causes the wrong input to be focused when clicking the label.

Upvotes: 0

Related Questions