Opened 8 years ago

Closed 7 years ago

Last modified 7 years ago

#7235 closed feature (wontfix)

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.

Change History (8)

comment:1 Changed 8 years ago by mgl3

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.

Last edited 8 years ago by mgl3 (previous) (diff)

comment:2 Changed 8 years ago by coaster3000

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.

comment:3 Changed 7 years ago by Scott González

Type: enhancementfeature

comment:4 Changed 7 years ago by Scott González

Milestone: 1.9.01.11.0

comment:5 Changed 7 years ago by bchiasson

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.

comment:6 Changed 7 years ago by mgl3

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.

comment:7 Changed 7 years ago by mgl3

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.

comment:8 Changed 7 years ago by Scott González

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.

Note: See TracTickets for help on using tickets.