Skip to main content

Search and Top Navigation

#7235 closed feature (wontfix)

Opened April 10, 2011 11:42PM UTC

Closed October 15, 2012 07:06PM UTC

Last modified October 15, 2012 11:29PM UTC

Button: Add dynamic label to simplify buttons from checkboxes

Reported by: mgl3 Owned by:
Priority: minor Milestone: 1.11.0
Component: ui.button Version: 1.8.11
Keywords: Cc:
Blocked by: Blocking:
Description

It would be helpful if the button plugin could create a toggle from just a single input checkbox element. Currently, it requires that the input has a valid ID attribute, and has a corresponding <label> element with the same ID named in a 'for' attribute.

Because of this, a situation that involves dynamically generating multiple checkboxes requires the creation of a unique ID, that must be named in both elements.

There are a few possibilities to work around this. One would be to allow the label element itself, or the labelSelector (used on line 205 of the ui.button plugin) to be supplied as an option to the plugin, or instead search for a label as the :next element following the checkbox.

Alternatively, instead of looking for an existing '<label>' element, all one to be added one dynamically, where the 'label' option for the plugin is used as the content of a new label element that is appended after the checkbox.

Attachments (0)
Change History (8)

Changed April 10, 2011 11:45PM UTC by mgl3 comment:1

_comment0: Sorry, the last sentence seems to have a typo, it should read: Alternatively, instead of looking for an existing '<label>' element, a new element could be created dynamically by the button plugin, where the 'label' option for the plugin is used as the content of a new label element that is appended after the checkbox. 1302493078954236

Sorry, the last sentence seems to have a typo, it should read: Alternatively, instead of looking for an existing '<label>' element, a new element could be created dynamically by the button plugin, where the current 'label' option for the plugin is used as the content of the new label element, which is then appended after the checkbox.

Changed May 24, 2011 04:00PM UTC by coaster3000 comment:2

I think it would be better if that is what is causing this bug that i found in 1.8.10. That its not being made properly causing a false bug aka user error. But other then that i think this would help set up button sets. This is because.. well i dont know but i think it would be best to use this idea for sure.

Changed June 26, 2012 01:22AM UTC by scottgonzalez comment:3

type: enhancementfeature

Changed October 11, 2012 02:43PM UTC by scottgonzalez comment:4

milestone: 1.9.01.11.0

Changed October 15, 2012 07:06PM UTC by bchiasson comment:5

resolution: → wontfix
status: newclosed
summary: More flexible setup for toggle/checkbox buttonButton: Add dynamic label to simplify buttons from checkboxes

Best practices for web applications is to supply a label for all input elements. This feature can be added via a custom plugin.

Changed October 15, 2012 07:42PM UTC by mgl3 comment:6

I'm not sure I understand the rationale here.

If I'm programatically creating a checkbox (i.e., within JavaScript code), it required me to first have the label element be added to the document first, then referenced through a property in the checkbox element. This requires a level of preparation/coordination that seems unsusal for something as simple as a checkbox with an associated label. For example, I cannot do something simple like this:

var checkbox = $('<input type="checkbox" id="somecheckbox" />').button({label:nodeOrText});

Instead, I have to do this (for each button):


var checkboxID = someUniqueID();
$('<label for="'+checkboxID+'">Some Label Text</label>').appendTo(containerNode);
$('<input id="'+checkboxID+'" />').appendTo(containerNode);
$('#'+checkboxID).button();

That's lots of extra code...I was just hoping at the time that I ran into this that there could be a better way without a separate plugin.

Changed October 15, 2012 07:56PM UTC by mgl3 comment:7

Just for contrast, a regular button can be done quite simply as this:

var button = $('<input type="button" />').button({label:'Some Text'});

The big difference in this case, from my point of view, is that I don't have to create multiple elements, or keep track of IDs between multiple elements associated with the widget, nor do I need to add them to the document first before calling the button() method.

I can later add the button as appropriate in my application like so:

button.appendTo(containerNode);

Maybe this clarifies better what I was trying to get at.

Changed October 15, 2012 11:29PM UTC by scottgonzalez comment:8

You don't need to append to the document first with inputs either, but the input and label need a common ancestor, otherwise it's impossible to find them by reference. Furthermore, it's not a limitation of the button widget that you need two elements when using an input instead of a button.