javascript - Accordion 复选框 jquery 和 html

Question

我正在使用 jquery Accordion 。在选项卡名称中，我有一个复选框，但我无法选中它。

不确定为什么会这样。有谁知道解决这个问题的方法吗？

   <!--Start Bens New Accordion-->
    <script>
        $(function () {
            $("#accordion")
                .accordion({
                    collapsible: true,
                    active: false,
                    heightStyle: "content"
                });
        });
    </script>
    <!--End Bens New Accordion-->
</head>

<div id="accordion">
    <h3>
        <label for='product-44-44'>
            <input type='checkbox' id='product-44-44' name='product_id_page-0[44-44]' value='44-44'
                   data-first_price="11.99" data-second_price="" data-paysys=""/>
            BUNDLE PACK: Practise Every Type of Test
        </label>
    </h3>
    <div class="columns">
        <div class="d1">
            1 list
        </div>
        <div class="d2">
            2 list
        </div>
    </div>
</div>

任何帮助将不胜感激， 谢谢

Answer 1

已更新

您的输入字段无法接收事件，因为在 jQuery UI 源代码中有:

_eventHandler: function( event ) {
........
event.preventDefault();

这意味着无论何时单击复选框，默认事件都会被禁止。

因此，作为解决方法，您可以为复选框重新启用此事件以执行禁止操作(选中/取消选中):

$(function () {
  $("#accordion")
  .accordion({
    collapsible: true,
    active: false,
    heightStyle: "content"
  });


  $("#accordion").find('input[type="checkbox"]').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    setTimeout(function() {
      this.checked = !this.checked;
    }.bind(this), 100);
  });
  
  
});

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<div id="accordion">
    <h3>
        <label for='product-44-44'>
            <input type='checkbox' id='product-44-44' name='product_id_page-0[44-44]' value='44-44'
                   data-first_price="11.99" data-second_price="" data-paysys="" style="z-index: 100;"/>
            BUNDLE PACK: Practise Every Type of Test
        </label>
    </h3>

    <div class="columns">
        <div class="d1">
            1 list
        </div>
        <div class="d2">
            2 list
        </div>
    </div>
</div>

我的解决方法是:

$(function () {
  $("#accordion")
  .accordion({
    collapsible: true,
    active: false,
    heightStyle: "content",
    beforeActivate: function( event, ui ) {
    if(event.originalEvent.target.tagName == 'INPUT' && event.originalEvent.target.type.toLowerCase() == 'checkbox') {
        event.preventDefault();
        setTimeout(function() {
          event.originalEvent.target.checked = !event.originalEvent.target.checked;
        }, 100);
      }
    }
  });
});

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<div id="accordion">
    <h3>
        <label for='product-44-44'>
            <input type='checkbox' id='product-44-44' name='product_id_page-0[44-44]' value='44-44'
                   data-first_price="11.99" data-second_price="" data-paysys="" style="z-index: 100;"/>
            BUNDLE PACK: Practise Every Type of Test
        </label>
    </h3>
    <div class="columns">
        <div class="d1">
            1 list
        </div>
        <div class="d2">
            2 list
        </div>
    </div>
</div>