Välj jQuery buttonset knapp programmatiskt

Jag hade ett problem idag. Jag hade skapat ett buttonset med jQuery och ville att en av knapparna alltid skulle vara förvald. Detta var dock enklare sagt än gjort. Det fanns ingen option (hoppas att det kommer) för att välja vilken knapp som skulle vara vald när sidan laddades.

Jag ville att det skulle se ut så här när jag laddade sidan:

Förvald knapp

Förvald knapp

Jag lyckades lösa detta på ett sätt som inte är optimalt, men det funkar.
Knepet är att utlösa Click() eventet på BÅDE labeln OCH radioknappen när sidan laddas.

Så här blev koden:

<html>
	<head>
		<link type="text/css" media="screen" rel="stylesheet" href="http://www.lundsbk.org/jquery_ui/css/theme/jquery-ui-1.8.9.custom.css" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
		<script type="text/javascript" src="jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="jquery-ui-1.8.5.custom.min.js"></script>
		<title>Test!</title>
		<script type="text/javascript">
			$(document).ready(function()
			{
				//Create a buttonset
				$('#ButtonsDiv').buttonset();
 
				//Make sure the second button is always pre-selected 
				$('#Second').click(); 			//Click the second radio button
				$('#LabelForSecond').click();	//Click the second label
			});
		</script>
	</head>
	<body>
		<div>
			<div id="ButtonsDiv">
				<input type="radio" name="Buttons" id="First" /><label for="First" id="LabelForFirst">First</label>
				<input type="radio" name="Buttons" id="Second" /><label for="Second" id="LabelForSecond">Second</label>
				<input type="radio" name="Buttons" id="Third" /><label for="Third" id="LabelForThird">Third</label>
			</div>
		</div>
	</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>