#9153 closed bug (worksforme)

Opened March 14, 2013 09:45AM UTC

Closed March 14, 2013 12:19PM UTC

Radio buttonset selection takes old element on change

Reported by: Oihana Owned by: Oihana
Priority: minor Milestone: none
Component: ui.button Version: 1.10.1
Keywords: Cc:
Blocked by: Blocking:
Description

Hello,

I have tested the new version and I found that when I have a radio buttonset and I try to retrieve the selected element it takes the previously selected one.

I have modified the example to show how it fails. If you select another element it will say that the selected element is radio2: 

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Button - Radios</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.9.1.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.button.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#radio" ).buttonset();

	$( "#radio > label" ).click( function (){
		alert($( "input[name=radio]:checked").attr("id"));
	});
	});


	</script>
</head>
<body>

<form>
	<div id="radio">
		<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
		<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
		<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
	</div>
</form>

<div class="demo-description">
<p>A set of three radio buttons transformed into a button set.</p>
</div>
</body>
</html>
Attachments (0)
Change History (3)

Changed March 14, 2013 11:38AM UTC by Oihana comment:1

I realized that the example I gave you doesn't make any sense, as the checked element changes just after the click function. The problem I have is because I made a workaround to ticket #7665 and I put the checked attr before reading it.

        $( "#radio label").click(function (){
            $("#"+$(this).attr("for")).attr("checked", true);
            $("#radio").buttonset("refresh");
            alert($("input[name=radio]:checked").attr("id"));
        });

And in this example, the alert gives the previously selected element instead of the new one.

Changed March 14, 2013 12:15PM UTC by scottgonzalez comment:2

owner: → Oihana
status: new → pending

Why are you doing this? You're trying to re-implement the native behavior, which doesn't make sense. Just let the browser and jQuery UI do their jobs: http://jsbin.com/eqayir/1/edit

Changed March 14, 2013 12:19PM UTC by scottgonzalez comment:3

resolution: → worksforme
status: pending → closed

Even your code works, when done properly (using .prop() instead of .attr()): http://jsbin.com/eqayir/2/edit