如何使复选框在使用 DNN7(挖空）的模板循环中工作

How to make checkboxes work inside templates loop with DNN7 (Knockout)

本文关键字：循环 工作 挖空 复选框 何使 DNN7      更新时间：2023-09-26

我在DNN7上运行了这段代码。要使复选框正常工作，必须添加类"normalCheckbox"。在下面的代码中，det 模板循环之外的第一个复选框工作正常，但无法单击手风琴中的复选框。

<input type="checkbox" value="onlychapter" data-bind="checked: myChkboxGlobal" class="filter-chkbox normalCheckBox"  /><label for="myChkboxGlobal" class="filter"  >Checkbox that works</label><br />
      <!-- -- ACCORDIAN  ACCORDIAN  ACCORDIAN  ACCORDIAN  ACCORDIAN  ACCORDIAN  ACCORDIAN  ACCORDIAN  ACCORDIAN  ACCORDIAN -- -->
            <div>    
                <h2 class="accordion ui-widget-header"> Project Assets</h2>
                <div id="accordion" data-bind="jqAccordion: { },template: { name: 'item-template', foreach: Items,  afterAdd: function(elem){$(elem).trigger('valueChanged');} }" ></div>                     
            </div>

<script type="text/html" id="item-template" >
    <div data-bind="attr: {'id': 'item' + itemId}, click: $root.Selected" class="group ui-widget-content ui-corner-tr" >
        <div class="accordion-header  ui-widget-header">
        <label> This is my acccordionheader </label>
        </div>
        <div class="accordion-content">
                        <input type="checkbox" class="normalCheckBox filter-chkbox" value="myChkbox" data-bind="checked: myChkbox"/><label for="myChkbox" class="filter-chkbox" >Check box working?</label>   
        </div>                      
    </div>
</script>

任何提示和提示表示赞赏。

尝试删除item-template上的两 （2） 个额外的关闭</div>，如下所示：

<script type="text/html" id="item-template" >
<div data-bind="attr: {'id': 'item' + itemId}, click: $root.Selected" class="group ui-widget-content ui-corner-tr" >
    <div class="accordion-header  ui-widget-header">
    <label> This is my acccordionheader </label>
    </div>
        <div class="accordion-content">
                    <input type="checkbox" class="normalCheckBox filter-chkbox" value="myChkbox" data-bind="checked: myChkbox"/><label for="myChkbox" class="filter-chkbox" >Check box working?</label>    
                </div> <!-- Remove this (1) -->
            </div> <!-- Remove this (2) -->
        </div>                      
</div>
</script>
相关文章：