Button: add support for input elements wrapped in labels for checkbox…

… and radio. Fixed #6063 - Button doesn't support radio input inside label.
jquery · Oct 20, 2010 · 3f96936 · 3f96936
1 parent c74f538
commit 3f96936
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 2 deletions.
diff --git a/tests/visual/button/button_ticket_6063.html b/tests/visual/button/button_ticket_6063.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8" />
+	<title>Button Visual Test : Button ticket #5261</title>
+	<link rel="stylesheet" href="../visual.css" type="text/css" />
+	<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css">
+	<style type="text/css">
+		.set {
+			padding: 1em;
+		}
+	</style>
+	<script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script>
+	<script type="text/javascript">
+	$(function() {
+
+	$('#toggle').toggle(function() {
+			$('input,button').not('.buttonset').button();
+			$('div.buttonset').buttonset();
+		},function() {
+			$('input,button').not('.buttonset').button('destroy');
+			$('div.buttonset').buttonset('destroy');
+		});
+	});;
+	</script>
+</head>
+<body>
+
+<h1 class="ui-widget-header"><a href="http://dev.jqueryui.com/ticket/6063">#6063 - Button doesn't support radio input inside label.</a></h1>
+
+<div class="set">
+	<input name="1" id="radio" type="radio"/>
+	<label for="radio">Radio</label>
+
+	<label><input name="1" id="radio_wrapped" type="radio"/>Radio Wrapped</label>
+	<label><input name="1" type="radio"/>Radio Wrapped (No ID)</label>
+</div>
+<div class="set">
+	<input name="2" id="checkbox" type="checkbox"/>
+	<label for="checkbox">Checkbox</label>
+
+	<label><input name="3" id="checkbox_wrapped" type="checkbox"/>Checkbox Wrapped</label>
+	<label><input name="4" type="checkbox"/>Checkbox Wrapped (No ID)</label>
+</div>
+
+<div class="set">
+	<div class="buttonset">
+		<label><input class="buttonset" name="5" type="radio"/>Wrapped 1</label>
+		<label><input class="buttonset" name="5" type="radio"/>Wrapped 2</label>
+		<label><input class="buttonset" name="5" type="radio"/>Wrapped 3</label>
+	</div>
+</div>
+
+
+
+<hr/>
+<div>
+<button id="toggle">Toggle Widget</button> 
+</div>
+
+</body>
+</html>
diff --git a/ui/jquery.ui.button.js b/ui/jquery.ui.button.js
@@ -200,8 +200,32 @@ $.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
-			this.buttonElement = this.element.parents().last()
-				.find( "label[for=" + this.element.attr("id") + "]" );
+			var id = this.element.attr("id");
+			if (id) {
+				this.buttonElement = this.element.parents().last()
+					.find( "label[for=" + this.element.attr("id") + "]" );
+			}
+			this.isWrapped = false;
+			this.labelHasFakeFor = false;
+			this.buttonHasFakeID = false;
+			if (!this.buttonElement || this.buttonElement.length != 1) {
+				this.buttonElement = this.element.parent().filter('label');
+				if (this.buttonElement.length != 0) {
+					this.element.insertBefore(this.buttonElement);
+					this.isWrapped = true;
+					var id = this.element.attr('id');
+					if (!id) {
+						this.labelHasFakeFor = true;
+						this.buttonHasFakeID = true;
+						var id = 'JQUIB_'+this.element.attr($.expando);
+						this.element.attr('id',id);
+						this.buttonElement.attr('for',id);
+					} else {
+						this.labelHasFakeFor = true;
+						this.buttonElement.attr('for',id);
+					}
+				}
+			}
 			this.element.addClass( "ui-helper-hidden-accessible" );
 
 			var checked = this.element.is( ":checked" );
@@ -227,6 +251,16 @@ $.widget( "ui.button", {
 			.removeAttr( "aria-pressed" )
 			.html( this.buttonElement.find(".ui-button-text").html() );
 
+		if (this.isWrapped) {
+			this.buttonElement.prepend(this.element);
+			if (this.labelHasFakeFor) {
+				this.buttonElement.removeAttr('for');
+			}
+			if (this.buttonHasFakeID) {
+				this.element.removeAttr('id');
+			}
+		}
+
 		if ( !this.hasTitle ) {
 			this.buttonElement.removeAttr( "title" );
 		}