jquery ui selectable - preventing user from selecting an item

Question

I have below html layout. When i enters a, b or c in to the text box (#txtprevent). i need to stop the user from selecting the specific item which has the data-attribute value. e.g.: if i enter b. i should not be allowed to select b. The problem have is event.preventDefault(); is not stopping the selection action. If this the expected functionality.

If there a different workaround for this?

Below is my 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>

My 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();
              }
           }
       });
    });

iandotkelly · Accepted Answer · 2014-05-27 00:26:04Z

1

simply return false

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

edited May 27, 2014 at 0:26

iandotkelly

9,1548 gold badges50 silver badges68 bronze badges

answered May 27, 2014 at 0:09

user3677895

214 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

InsI · Accepted Answer · 2014-05-27 21:11:45Z

0

I found a workaround for this, instead of using the 'selecting' event i use the 'selected' event and remove the 'ui-selected' class of the selected item. Below is the implementation

$(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');
              }
           }
       });
    });

answered May 27, 2014 at 21:11

InsI

1773 silver badges10 bronze badges

Collectives™ on Stack Overflow

jquery ui selectable - preventing user from selecting an item

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related