在选择之后禁用选中的元素

Disable a selected element after select

本文关键字：元素 选择 之后      更新时间：2023-09-26

如何在点击一个可选元素后禁用它?我还需要改变它的CSS样式。

$(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>

我试着这样做

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

但它不起作用。

这个想法是在一个元素被点击后禁用它，这样用户就不能再选择它了。

有点棘手，但可以做到。

通过在 stop 事件处理程序中应用CSS类(.selectable-disabled)来禁用pointer-events。
然后使用 filter 选项，只允许对li:not(.selectable-disabled)项进行选择。

你可以通过移除.selectable-disabled类来恢复项目的初始状态(点击下面的演示按钮)

$( 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>

您可以通过调用disable方法来禁用可选择的小部件:

$(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>

相关文章：