Question

我有以下html布局。当我在文本框中输入a，b或c时（#txtprevent）。我需要阻止用户选择具有数据属性值的特定项目。例如：如果我输入b。我不应该被允许选择b。问题是event.preventDefault（）;没有停止选择行动。如果这是预期的功能。

如果有不同的解决方法吗？

以下是我的Html

<input id="txtprevent" type="text">
<table id="mySelectable" class="ui-selectable">
    <tbody><tr id="1" data-myapp="a" class="ui-selectee">
        <td>Row 2</td>
    </tr>
    <tr id="2" data-myapp="b" class="ui-selectee">
        <td>Row 3</td>
    </tr>
    <tr id="3" data-myapp="c" class="ui-selectee">
        <td>Row 1</td>
    </tr>
</tbody></table>

我的js

    $(function () {
      $('#mySelectable').selectable({
          filter: "tr",
          selecting: function (event, ui) {
              var item = $(ui.selecting);
              var itemVal = item.prop('data-myApp');
              if(itemVal == $('#txtprevent').val()){
                  //does not stop the selection process
                  event.preventDefault();
              }
           }
       });
    });

Answer 1

简单地返回false

if(itemVal == $('#txtprevent').val()){
   //does not stop the selection process
   return false;
}

Answer 2

我找到了一个解决方法，而不是使用'选择'事件我使用'selected'事件并删除所选项目的'ui-selected'类。以下是实施

$(function () {
      $('#mySelectable').selectable({
          filter: "tr",
          selected: function (event, ui) {
              var item = $(ui.selected);
              var itemVal = item.prop('data-myApp');
              if(itemVal == $('#txtprevent').val()){
                    //Can give any msg if required.
                    //Remove the selected class
                    item.removeClass('ui-selected');
              }
           }
       });
    });

jquery ui selectable - 阻止用户选择项目

2 个答案: