furry furry - 1 month ago 14
Javascript Question

Disable a selected element after select

How can I disable a selectable element after it was clicked in the following example? Also I need to change it 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.

Answer

Kinda tricky, but can be done.

Disable pointer-events by applying a CSS class to the selected item inside selected event handler.
Then you can restore items to initial state by removing that 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>

Comments