Skip to content

Loading…

Button: support <input> tag wrapped in <label> tag. Fix #6063, Button doesn't support radio input inside label. #531

Closed
wants to merge 2 commits into from

3 participants

@mail6543210

No description provided.

@mail6543210

Actually I'm not really sure how does the unit-test work, I just guess and edit the button.html.
If my guess is correct, please also let mo know.
Thanks.

@fajan

I did some other approach for the same bug: I just updated the _determineButtonType to check for parents, and if matched just temporary detached the input from DOM. #777

And for unit test: I don't know either, but just after a quick look: maybe it requires a '#6063' test case in https://github.com/jquery/jquery-ui/blob/master/tests/unit/button/button_tickets.js too?

@mikesherov
jQuery Foundation member

Thanks for the patch, but reviewing the underlying ticket we closed it as wontfix, see @jzaefferer's comment there: http://bugs.jqueryui.com/ticket/6063#comment:13

@mikesherov mikesherov closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Nov 22, 2011
  1. @mail6543210

    Button: support <input> wrapped in <label>

    mail6543210 committed
    Signed-off-by: mail6543210 <mail6543210@yahoo.com.tw>
  2. @mail6543210

    Unit-test for fix of #6063

    mail6543210 committed
Showing with 40 additions and 0 deletions.
  1. +7 −0 tests/unit/button/button.html
  2. +33 −0 ui/jquery.ui.button.js
View
7 tests/unit/button/button.html
@@ -61,6 +61,13 @@ <h2 id="qunit-userAgent"></h2>
<input type="radio" id="radio23" name="radio" checked="checked"><label for="radio23">Choice 3</label>
</div>
</form>
+<form>
+ <div id="radio3" style="margin-top: 2em;">
+ <label><input type="radio" id="radio31" name="radio">Choice 1</label>
+ <label><input type="radio" id="radio32" name="radio">Choice 2</label>
+ <label><input type="radio" id="radio33" name="radio" checked="checked">Choice 3</label>
+ </div>
+</form>
<input type="checkbox" id="check"><label for="check">Toggle</label>
View
33 ui/jquery.ui.button.js
@@ -228,6 +228,26 @@ $.widget( "ui.button", {
if ( this.type === "checkbox" || this.type === "radio" ) {
// we don't search against the document in case the element
// is disconnected from the DOM
+
+ //if the <input>'s parent is <label>( ie. implicit label), convert into explicit label.
+ if ( this.element.parent( "label" ).length ) {
+ //used when destroy -> convert back to implicit label.
+ this.isImplicit = true;
+ var id = this.element.attr( "id" );
+ if ( !id ) {
+ //get the idList of :ui-button and :not([id])( we haven't built yet)
+ var idList=$( ":ui-button" ).filter( "[id^='ui-button-'], :not([id])" ).map(function(){
+ return this.id.substr(10);
+ }).get();
+ var max=Math.max.apply(Math,idList);
+ id = "ui-button-" + (max+1);
+ //set new_id = current_max+1, in case of duplicated
+ this.element.attr( "id", id);
+ }
+ this.element.parent( "label" ).attr( "for", id);
+ this.element.insertBefore(this.element.parent( "label" ));
+ }
+
var ancestor = this.element.parents().last(),
labelSelector = "label[for='" + this.element.attr("id") + "']";
this.buttonElement = ancestor.find( labelSelector );
@@ -262,6 +282,19 @@ $.widget( "ui.button", {
.removeAttr( "role" )
.removeAttr( "aria-pressed" )
.html( this.buttonElement.find(".ui-button-text").html() );
+ if ( this.isImplicit ) {
+ if ( this.buttonElement.attr( "for" ).indexOf( "ui-button-" ) !== -1 ) {
+ this.buttonElement.removeAttr( "for" );
+ this.element.removeAttr( "id" );
+ }
+ this.element.prependTo(this.buttonElement);
+ }
+ if ( this.buttonElement.attr( "class" ) === "") {
+ this.buttonElement.removeAttr( "class" );
+ }
+ if ( this.element.attr( "class" ) === "") {
+ this.element.removeAttr( "class" );
+ }
if ( !this.hasTitle ) {
this.buttonElement.removeAttr( "title" );
Something went wrong with that request. Please try again.