Problem with checkboxes in Tabs/Accordion headers
Hi,
I'm trying to design a page component that contains checkbox inuts as
part of the tab or accordion header elements. Logically speaking, the
user can first "elect" to see a piece of functionality contained in
the tab/checkbox in addition to simply choosing to view it. The issue
that I am experiencing is that the user is unable to toggle the
checkbox state, it appears as though the jQuery UI component is
triggering a double click of the element, returning it to its original
state instead of toggling the state. I've attached a bare bones sample
using the tab component, although the behavior was identical with an
accordion. Any idea why the UI component is interfering with these
clicks, and is there anything I can do in a custom click handler or
anything that can prevent this?
Thanks for the assistance,
Jason
----------------------------------------------------------------
<html>
<head>
<script type="text/javascript" src="http://jquery-
ui.googlecode.com/svn/trunk/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="http://jquery-
ui.googlecode.com/svn/trunk/ui/ui.core.js" ></script>
<script type="text/javascript" src="http://jquery-
ui.googlecode.com/svn/trunk/ui/ui.tabs.js" ></script>
<link type="text/css" href="http://jquery-ui.googlecode.com/svn/
trunk/themes/base/ui.all.css" rel="stylesheet" />
<link type="text/css" href="http://jquery-ui.googlecode.com/svn/
trunk/demos/demos.css" rel="stylesheet" ></link>
<script type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<h1>Checkbox Tab Component Test</h1>
<form>
<div id="tabs">
<ul>
<li><a href="#apple"><input type="checkbox" name="fruit"
value="apple" checked="true"/>Apple</a></li>
<li><a href="#pear"><input type="checkbox" name="fruit"
value="pear" checked="true"/>Pear</a></li>
<li><a href="#orange"><input type="checkbox" name="fruit"
value="orange"/>Orange</a></li>
</ul>
<div id="apple">Apple tab contents
</div>
<div id="pear">Pear tab contents
</div>
<div id="orange">Orange tab contents
</div>
</div>
</form>
</body>
<html>