Skip to content
Permalink
Browse files

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

… and radio. Fixed #6063 - Button doesn't support radio input inside label.
  • Loading branch information
urkle committed Oct 19, 2010
1 parent c74f538 commit 3f9693695537806244a853d7901912cc9ba94e86
Showing with 101 additions and 2 deletions.
  1. +65 −0 tests/visual/button/button_ticket_6063.html
  2. +36 −2 ui/jquery.ui.button.js
@@ -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>
@@ -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" );
}

0 comments on commit 3f96936

Please sign in to comment.
You can’t perform that action at this time.