Jquery Accordian 抑制点击事件

Question

各位， 我有手风琴面板，其标题中包含一个复选框：

 <div id="accordion">
   <h3><a href="#"><input type='checkbox' id='chkbox'/>First header</a></h3>
   <div>First content</div>
    <h3><a href="#">Second header</a></h3>
   <div>Second content</div>
</div>

现在，当我单击复选框时，jquery 使用 event.preventDefault 抑制单击事件。因此我无法更改复选框状态。我尝试了以下技巧但没有成功：

$("#accordion").accordion();

$('#chkbox').live('click',function(){
   var checkbox = $(this).find(':checkbox');
   checkbox.attr('checked', !checkbox.attr('checked'));

});

请帮助！ 请参阅代码 http://jsfiddle.net/teBfb/1/ 谢谢

Answer 1

你正在做的事情

.attr('checked', !$checkbox.attr('checked'));

应该有效。这意味着您的选择器已损坏。为什么在变量名中使用 $ 符号？它可能会让 jQuery 感到困惑。

Answer 2

您可以使用 stopPropagation 这样您的复选框单击事件就不会沿着链向上移动。

$("#accordion h3 input").click(function(e) { 
    e.stopPropagation(); 
}); 

http://jsfiddle.net/teBfb/6/

Answer 3

   $(function () {
        $("#accordion").accordion({
            collapsible: true,


        });
    });



    $("#accordion h3 input").click(function (e) {

        var checkedStatus = $(this).prop('checked');
        e.stopPropagation();
         if (checkedStatus) {


           $("#accordion div div").slideUp();

            $(this).parent().next().slideDown();
         }
        else {


             $("#accordion div div").slideDown();

             $(this).parent().next().slideUp();

       }


    });

试试这个