JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<ol id="selectable">
    <li class="ui-widget-content">Item 1
        <input type="checkbox" />
    </li>
    <li class="ui-widget-content">Item 2
        <input type="checkbox" />
    </li>
    <li class="ui-widget-content">Item 3
        <input type="checkbox" />
    </li>
    <li class="ui-widget-content">Item 4
        <input type="checkbox" />
    </li>
    <li class="ui-widget-content">Item 5
        <input type="checkbox" />
    </li>
    <li class="ui-widget-content">Item 6
        <input type="checkbox" />
    </li>
    <li class="ui-widget-content">Item 7
        <input type="checkbox" />
    </li>
</ol>

CSS

#feedback {
    font-size: 1.4em;
}
#selectable .ui-selecting {
    background: #FECA40;
}
#selectable .ui-selected {
    background: #F39814;
    color: white;
}
#selectable {margin:30px:
    list-style-type: none;
    padding: 30px;
    width: 60%;
}
#selectable li {
    margin: 3px;
    padding: 0.4em;
    font-size: 1.4em;
    height: 18px;
}

JavaScript

$(function(){
$( "#selectable" ).selectable({
  selected: function( event, ui ) {
         $(ui.selected).find('input').prop('checked', true);
  },
  unselected: function( event, ui ) {
         $(this).find('input').prop('checked', false);
  }
    
});
			$(this).disableSelection().find('input').prop('checked', false);
	});