在 ipad 上保持带有复选框的剑道 UI 多选下拉列表

Question

我正在尝试获得一个剑道 UI jquery 下拉列表，该下拉列表具有复选框以保持打开状态，直到它失去焦点（单击屏幕上的任何位置，但在下拉列表本身内单击列表或按钮） - 因此可以选中/取消选中多个项目

这适用于桌面浏览器和 ipad 上的 Safari 的早期版本，但在 14.8（我目前最新的版本）上，只要单击复选框或复选框 label，它就会关闭。

当单击或更改项目时，我尝试停止立即传播、防止默认等，但这在 14.8 上不起作用。 我正在使用 ipad 进行测试。

    var dropdown = $("#FilterBy").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            template: $("#CheckboxTemplate").html(),
            dataSource:data,
           select:function(e){
             console.log('select');
             e.preventDefault();
             e.stopPropagation();
           },
           
            
         }).data("kendoDropDownList");
  
    // add change handler to each checkbox item - stop propogation
    dropdown.list.find("input[name='checkitbox']").bind("change", function (e) {
      console.log('checkbox changed',e);
     e.stopImmediatePropagation();
    })
          dropdown.list.find("input[name='checkitbox']").bind("click", function (e) {
            e.stopImmediatePropagation();
            //console.log('checkbox clicked');
            var $item = $(this);
            var $input;
            $input = $item;            
             var inputChecked = $input.is(':checked');
            // Check all clicked, ie first item in list?
             if ($input.val() == "0") {
               dropdown.list.find(".check-input").prop("checked", inputChecked);
            }
          });
    
    dropdown.list.find(".check-item").bind("touchstart", function (e) {
      //attempt to stop it closing on ipads here
      e.preventDefault();
    }); 
    dropdown.list.find(".check-item").bind("click", function (e) {
             e.stopImmediatePropagation();
            var $item = $(this);
            var $input;
             console.log('.check-item click', $item);
            
               // Text was clicked
                $input = $item.children(".check-input");
                console.log('text was clicked', '$item',$item,'$input',$input,$input.is(':checked'),!$input.is(':checked'));
               $input.prop("checked", $input.is(':checked') ? false:true);
              console.log('text was clicked', $item,$input,$input.is(':checked'));
                        
             var inputChecked = $input.is(':checked');
             console.log('inputChecked', inputChecked,$input.val());
            // Check all clicked?
            if ($input.val() == "0") {
              
               dropdown.list.find(".check-input").prop("checked", inputChecked);
            }
                     
          });

https://dojo.telerik.com/@johnlucas/ORUTIget/5

谢谢你的帮助！