时间戳

首页 > 解决方案 > 如何双击勾选复选框？

html - 如何双击勾选复选框？

问题描述

我使用带有 changeStatus 功能的购物清单在点击时更新元素。元素会自动过滤（顶部未勾选）。有时我错过了一个元素，所以它被勾选并被自动过滤，然后立即消失在我的列表底部，所以我什至不知道哪个元素被勾选（购物时太糟糕了......）。

我想通过强制双击来勾选/取消勾选元素来防止这种情况，但我不知道如何使用复选框来处理它。

<fieldset class="items-list">
        <label class="items-list-item" ng-repeat="item in items | filter : filterItem">
            <input
            type="checkbox"
            value="{{item.STATUS}}"
            ng-checked="item.STATUS==2"
            ng-click="changeStatus(item.ID,item.STATUS,item.ITEM)"
            class="items-list-cb"/>
            <span class="items-list-mark"></span>
            <span class="items-list-desc" ng-class="{strike:item.STATUS==2}">{{item.ITEM}}</span> 
            <a ng-click="deleteItem(item.ID)" class="pull-right red"><i class="fa fa-minus-circle"></i></a> 
        </label>
    </fieldset>

标签： html

解决方案

试试这个代码： 

$(document).ready(function() {
  $(".dbl").click(function(e) {
    e.preventDefault();
  });
  $(".dbl").dblclick(function(e) {
    let myCheckbox = $("input[type=checkbox]", this);
    myCheckbox.prop("checked", !myCheckbox.prop("checked"));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="dbl"><input class="dbl" type="checkbox">double click to tick/untick element</label>

推荐阅读