アコーディオンチェックボックスjqueryとhtml

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(); 

を

これは、あなたがチェックボックスを押すと、デフォルトのイベントは禁止されます。

ので、workarountとして、あなたが禁止アクションを実行するために、チェックボックスのために、このイベントを再度有効にすることができます（/チェックを外しを確認してください）：

$(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>

マイworkarountは次のとおりです。

$(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

私のコメントによると、ラベルはアコーディオンのヘッダーの内側にあるので、クリックは無効になっています。これは、content divを開くための独自のイベントが添付されています。ラベルアクション発射。

$("#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')) 
 
    } 
 
    });

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

しかし、これはあなたのチェックボックスを使用すると、複数のアコーディオンのセクションを持っている場合、それだけでチェックすることでラジオのように振る舞うようになります：あなたは次のことを試すことができます。この問題を回避するには

開いているセクションのチェックボックス