Disable a selected element after select

Question

How can I disable a selectable element after it was clicked in the following example? Also I need to change its CSS style.

$(function(){
  $("#selectable").selectable({
    stop: function() {
      var result = $( "#select-result" ).empty();
      $( ".ui-selected", this ).each(function() {
         var index = $( "#selectable li" ).index( this );
         result.append( " #" + ( index + 1 ) );
      });
    }
  });
});

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Selectable - Serialize</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">

    <style>
      #feedback { font-size: 1.4em; }
      #selectable .ui-selecting { background: #FECA40; }
      #selectable .ui-selected { background: #F39814; color: white; }
      #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
      #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  </head>
  <body>
    <p id="feedback"><span id="select-result">none</span>.</p>
    <ol id="selectable">
      <li class="ui-widget-content">Item 1</li>
      <li class="ui-widget-content">Item 2</li>
    </ol> 
  </body>
</html>

I tried to make like this

$("#selectable li").index(this).css('text-decoration', 'line-through');

but it does't work.

The idea is to disable an element after it was already cliked so that user could not select it again.

`so that user could not select it again` - it's kinda natural that selected option cannot be selected twice. Do you want the option to be selected pernamently? What if an user selects another option, should the previous one stay selected or removed from selection and disabled? — Artur Filipiak, Oct 30 '16 at 07:35
Possible duplicate of [jQuery UI Selectable disable](http://stackoverflow.com/questions/9060997/jquery-ui-selectable-disable) — Kiran Shakya, Oct 30 '16 at 07:38
@ArturFilipiak if user selects another option, the previous should be removed from selection and disabled. and an another desired ability would be reseting the whole component to an initial state... — furry, Oct 30 '16 at 07:49

Artur Filipiak · Accepted Answer · 2016-10-30T08:46:12.267

Kinda tricky, but can be done.

Disable pointer-events by applying a CSS class (.selectable-disabled) to the selected items inside your stop event handler.
Then use filter option to allow selection only for li:not(.selectable-disabled) items.

You can restore items to their initial state by removing .selectable-disabled class (button click in demo below)

$( function() {
  $( "#selectable" ).selectable({
    filter : 'li:not(.selectable-disabled)',
    stop: function(){
      var result = '';
      $( ".ui-selected", this ).each(function() {
        result += " #" + ( $(this).index() + 1 );
      }).addClass('selectable-disabled').removeClass('ui-selected');
      $( "#select-result" ).html(result || 'none');
    }
  });
  
  $('#restore').click(function(){
    $('.selectable-disabled').removeClass('selectable-disabled');
  });
});

.selectable-disabled{
  text-decoration : line-through;
  pointer-events : none;
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Selectable - Serialize</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">

    <style>
      #feedback { font-size: 1.4em; }
      #selectable .ui-selecting { background: #FECA40; }
      #selectable .ui-selected { background: #F39814; color: white; }
      #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
      #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  </head>
  <body>
    <p id="feedback"><span id="select-result">none</span>.</p>
    <ol id="selectable">
      <li class="ui-widget-content">Item 1</li>
      <li class="ui-widget-content">Item 2</li>
      <li class="ui-widget-content">Item 3</li>
      <li class="ui-widget-content">Item 4</li>
      <li class="ui-widget-content">Item 5</li>
      <li class="ui-widget-content">Item 6</li>
    </ol>
    <p><button id=restore>Restore</button></p>
  </body>
</html>

it seems that after some time a deselected elements are selectable againe even it shows `line-through` on them because index element changes at the top — furry, Oct 30 '16 at 08:25
@furry , it's because of mouse dragging (selecting few elements at once). Try it now — Artur Filipiak, Oct 30 '16 at 08:40

Kiran Shakya · Answer 2 · 2016-10-30T07:09:50.430

You can disable the selectable widget simply by calling disable method :

$(this).selectable("disable");

$(function() {
  $("#selectable").selectable({
    stop: function() {
      var result = $("#select-result").empty();
      $(".ui-selected", this).each(function() {
        $(this).css('text-decoration', 'line-through'); // This line adds strike through formatting.
        var index = $("#selectable li").index(this);
        result.append(" #" + (index + 1));
      });
      $(this).selectable("disable"); // http://api.jqueryui.com/selectable/#method-disable
    }
  });
});

#feedback {
  font-size: 1.4em;
}
#selectable .ui-selecting {
  background: #FECA40;
}
#selectable .ui-selected {
  background: #F39814;
  color: white;
}
#selectable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}
#selectable li {
  margin: 3px;
  padding: 0.4em;
  font-size: 1.4em;
  height: 18px;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectable - Serialize</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

<body>
  <p id="feedback"><span id="select-result">none</span>.</p>
  <ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
  </ol>
</body>

</html>

you are blocking the whole component instead of a particulat li element — furry, Oct 30 '16 at 07:32
this post might be helpful in your case http://stackoverflow.com/questions/9060997/jquery-ui-selectable-disable — Kiran Shakya, Oct 30 '16 at 07:37

Disable a selected element after select

2 Answers2