Added selectable labels for radio buttons.

The radio buttons in association facet and radio widget are now
linked to their labels so that they can be selected by clicking
the labels.

Ticket #1782
This commit is contained in:
Endi S. Dewata 2011-09-30 21:25:47 -05:00 committed by Martin Kosek
parent c76bbd5129
commit e9c8581ffc
2 changed files with 29 additions and 8 deletions

View File

@ -908,7 +908,10 @@ IPA.association_facet = function (spec) {
span.append(IPA.messages.association.show_results);
span.append(' ');
var direct_id = that.entity.name+'-'+that.attribute_member+'-'+that.other_entity+'-direct-radio';
that.direct_radio = $('<input/>', {
id: direct_id,
type: 'radio',
name: 'type',
value: 'direct',
@ -919,11 +922,17 @@ IPA.association_facet = function (spec) {
}
}).appendTo(span);
span.append(' ');
span.append(IPA.messages.association.direct_enrollment);
$('<label/>', {
text: IPA.messages.association.direct_enrollment,
'for': direct_id
}).appendTo(span);
span.append(' ');
var indirect_id = that.entity.name+'-'+that.attribute_member+'-'+that.other_entity+'-indirect-radio';
that.indirect_radio = $('<input/>', {
id: indirect_id,
type: 'radio',
name: 'type',
value: 'indirect',
@ -934,8 +943,10 @@ IPA.association_facet = function (spec) {
}
}).appendTo(span);
span.append(' ');
span.append(IPA.messages.association.indirect_enrollment);
$('<label/>', {
text: IPA.messages.association.indirect_enrollment,
'for': indirect_id
}).appendTo(span);
}
};

View File

@ -936,13 +936,23 @@ IPA.radio_widget = function(spec) {
for (var i=0; i<that.options.length; i++) {
var option = that.options[i];
// TODO: Use ID generator or accept ID from spec to avoid conflicts.
// Currently this ID is unique enough, but it will not work if the
// radio button is used multiple times for the same attribute, for
// example both in adder dialog and details facet.
var id = that.entity.name+'-'+that.name+'-'+i+'-radio';
$('<input/>', {
'type': 'radio',
'name': that.name,
'value': option.value
id: id,
type: 'radio',
name: that.name,
value: option.value
}).appendTo(container);
container.append(option.label);
$('<label/>', {
text: option.label,
'for': id
}).appendTo(container);
}
if (that.undo) {