Question

我正在使用jquery手风琴。在选项卡名称中，我有一个复选框，但我无法检查它。

不确定为什么会这样。有没有人知道解决这个问题？

   <!--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>

Answer 2

根据我的评论，点击被禁用，因为标签位于手风琴的标题内，该标签附有自己的事件以打开内容div - 这可以防止默认或停止传播附加到它会停止你的标签动作。

要解决此问题，您可以尝试以下方法：

＆＃13;

$("#accordion")
  .accordion({
    collapsible: true,
    active: false,
    heightStyle: "content",
    beforeActivate: function(event, ui) {
      var oldInput = ui.oldHeader.find('input');
      oldInput.prop('checked', !oldInput.prop('checked')) // this bit unchecks when the accordion is closed

      var newInput = ui.newHeader.find('input'); // this bit checks when the accordion is opened
      newInput.prop('checked', !newInput.prop('checked'))
    }
  });

＆＃13;

<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=""/>
            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>

＆＃13;

然而，如果您有多个手风琴部分，这将使您的复选框像无线电一样，它只会检查打开部分的复选框

手风琴复选框jquery和html

2 个答案: