javascript - 如何检查用户是否通过 jQuery selectable 选择了一个项目？

Question

我有一个带有 jQ​​uery 可选和一个按钮的可选列表。该按钮通常默认禁用，但如果用户在我的表中选择一个或多个条目，我想启用它，或者如果选择为 0，我想再次禁用它。我该怎么做？

jQuery(document).ready(function($) {
  $("#selectable").bind("mousedown", function(e) {
    e.metaKey = true;
  }).selectable({
    stop: function() {}
      //Somehow I need to enable/disable my button if there is a selected item
  });
});

#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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>
<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>
  <li class="ui-widget-content">Item 7</li>
</ol>
<button disabled>Trigger</button>

标签： javascripthtmljquery

Answer 1

实现这一点的一种方法是当可选插件触发选定和未选定事件时，通过 css 选择器检查选择了多少 li 元素。

$(document).ready(function($) {
  $("#selectable").bind("mousedown", function(e) {
    e.metaKey = true;
  }).selectable({
    selected: function( event, ui ) {
      updateButton()
    },
    unselected: function( event, ui ) {
      updateButton()
    },
  });
});

function updateButton() {
  const qntSelected = $('#selectable li.ui-selected').length;
  
  $('button').attr('disabled', qntSelected === 0);
}

#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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>
<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>
  <li class="ui-widget-content">Item 7</li>
</ol>
<button disabled>Trigger</button>