选择后禁用选定的元素答案

【问题标题】：Disable a selected element after select选择后禁用选定的元素
【发布时间】：2016-10-30 06:26:18
【问题描述】：

如何在以下示例中单击可选元素后禁用它？我还需要更改它的 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');

但它不起作用。

这个想法是在元素被点击后禁用它，以便用户无法再次选择它。

【问题讨论】：

so that user could not select it again - 选择的选项不能被选择两次是很自然的。您希望永久选择该选项吗？如果用户选择了另一个选项，前一个选项应该保持选中状态还是从选择中删除并禁用？
jQuery UI Selectable disable的可能重复
@ArturFilipiak 如果用户选择另一个选项，则应从选择中删除并禁用前一个选项。另一个期望的能力是将整个组件重置为初始状态......

标签： javascript jquery css jquery-ui jquery-ui-selectable

【解决方案1】：

有点棘手，但可以做到。

通过将 CSS 类 (.selectable-disabled) 应用于 stop 事件处理程序中的选定项目来禁用 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>

【讨论】：

似乎在一段时间后取消选择的元素可以再次选择，即使它在它们上显示line-through，因为顶部的索引元素发生了变化
@furry ，这是因为鼠标拖动（一次选择几个元素）。立即尝试

【解决方案2】：

您可以通过调用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>

【讨论】：

你正在阻止整个组件而不是一个特定的 li 元素
这篇文章可能对您有帮助stackoverflow.com/questions/9060997/…