Как я могу проверить, выбрал ли пользователь элемент с помощью jQuery selectable?

Question

У меня есть список для выбора с возможностью выбора jQuery и кнопкой. По умолчанию кнопка обычно отключена, но я хочу включить ее, если пользователь выберет одну или несколько записей в моей таблице, или снова отключить ее, если выбран 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>

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>

Answer 2

Вы можете использовать комбинацию событий selected и unselected для включения / выключения кнопки.

jQuery(document).ready(function($) {
  let selectedCount = 0;
  $("#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
    selected: function( event, ui ) {
      ++selectedCount;
      if (selectedCount === 1) {
        $('button').removeAttr('disabled');
      }
    },
    unselected: function( event, ui ) {
      --selectedCount;
      if (!selectedCount) {
        $('button').attr('disabled', true);
      }
    },
  });
});

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