<script language="JavaScript">
<!--
function _AN_global_var_init(){
	_AN_this_url = "/prx/000/";
	_AN_base_scheme = "https";
	_AN_base_host = "https://patch-diff.githubusercontent.com";
	_AN_base_path = "https://patch-diff.githubusercontent.com/raw/jquery/jquery-ui/pull/";
	_AN_encode_urls = 0;
	_AN_mpo = 1;
	_AN_md = 0;
	_AN_rel_urls = 1;
	_AN_nav_switch = 0;
	_AN_nav_allowurl = 1;
	_AN_nav_override = 0;
	_AN_has_iframe = 0;
	_AN_dbg_flags = null;
	_AN_nav_use_aaa = 1;
	_AN_expires_pass = 0;
	_AN_wrap_evthandlers = 0;
	_AN_rewrite_param_exact = 0;
	_AN_obj_params = {};
} 
_AN_global_var_init();
//-->
</script>
<script language="JavaScript" src="/prx/001/http/localh/an_util.js"></script>
<script language="JavaScript" src="/prx/001/http/localh/NSLib.js"></script>

diff --git a/tests/unit/button/button.html b/tests/unit/button/button.html
index 5ec7e316afb..9458e601ef7 100644
--- a/tests/unit/button/button.html
+++ b/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>
 
diff --git a/ui/jquery.ui.button.js b/ui/jquery.ui.button.js
index 18a95056330..7b2d73aa8f0 100644
--- a/ui/jquery.ui.button.js
+++ b/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" );
