jquery ui selectable - 防止用户选择一个项目答案

【问题标题】：jquery ui selectable - preventing user from selecting an itemjquery ui selectable - 防止用户选择一个项目
【发布时间】：2014-05-27 00:06:36
【问题描述】：

我有以下 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();
              }
           }
       });
    });

【问题讨论】：

标签： jquery jquery-ui jquery-ui-selectable

【解决方案1】：

只返回假

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

【讨论】：

【解决方案2】：

我找到了一个解决方法，而不是使用“选择”事件，而是使用“选择”事件并删除所选项目的“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');
              }
           }
       });
    });

【讨论】：