jquery ui selectable - не дает пользователю выбрать элемент

Question

jquery ui selectable - не дает пользователю выбрать элемент

0

У меня ниже 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();
              }
           }
       });
    });

InsI 27 май 2014, в 02:44

Источник

Теги:

jquery

jquery-ui

jquery-ui-selectable

2 ответа

Ещё вопросы

user3677895 · Answer 1 · 2014-05-26T21-40-00.000Z

просто верните false

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

Я попробовал это, это не работает ..

InsI · Answer 2 · 2014-05-27T19-49-00.000Z

Я нашел обходное решение для этого, вместо использования события "Выбор" я использую событие "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');
              }
           }
       });
    });