how to disable a specific element of selectable list - jquery-ui

Question

I want to disable a specific element of a selectable list.
I am able to disable the whole list, but when I try with specific element, it doesn't work.
$('#disableButton').click(function(){
$('#selectable li#b ').selectable('disable');
});
http://jsfiddle.net/Komlan/RYWaZ/1/
Here is my code
//reset seats
function resetSelect(){
var options = { filter: "li.selectable" };
$( "#selectable").selectable(options);
}
//Ajax get taken seats
$('input[name="choice"]').change(function(){
resetSelect();
var sc_id = $('input:radio[name=choice]:checked').val();
$.ajax({
url: 'seatings.php',
data:{ sc_id:sc_id},
type: "POST",
dataType:'text',
success: function(data){
var id = data.split(",");
for (var i=0;i<id.length -1;i++){
alert(id[i]);
var string = "#"+id[i];
$(string).css("color","red");
$('#selectable li'+string).removeClass("selectable ui-selected");
}
var options = { filter: "li.selectable" };
$( "#selectable" ).selectable('destroy').selectable(options);
}
});
});
In summary, I'm getting a series of id and disable them one after the other, every time there is a change on my radio button group.

Answer 1

There is no straight way to do this (AFAIK), but here's a little hack you can use (and remember, it's just a hack and maybe not the best):
Add the css class "selectable" (or whatever you want):
<ol id="selectable">
<li class="ui-widget-content selectable" id="ok"> 1</li>
<li class="ui-widget-content selectable"> 2</li>
<li class="ui-widget-content selectable"> 3</li>
<li class="ui-widget-content selectable"> 4</li>
<li class="ui-widget-content selectable"> 5</li>
<li class="ui-widget-content selectable"> 6</li>
<li class="ui-widget-content selectable"> 7</li>
</ol>
And then use a filter on that css class:
// Create a filter to only make <li> with the specified css class, selectable.
var options = { filter: "li.selectable" };
$( "#selectable" ).selectable(options);
$('#lol').click(function(){
console.log('dsfds');
// Remove/add (toggle) the class used in the filter on the <li> you want to remove the selectable.
// (Also remove the ui-selected in case it's selected.)
$('#selectable li#ok').toggleClass("selectable").removeClass("ui-selected");
// Now destroy the selectable and re-create it with the filter again.
// We removed the css class from a <li> used in the filter, so it won't be selectable again.
$( "#selectable" ).selectable('destroy').selectable(options);
});
Updated: http://jsfiddle.net/RYWaZ/7/
References:
Selectable filter
.toggleClass()

Answer 2

Actually you can achieve this now.
You've got to add the class you want to your item, for example "unselectable", and use this css trick in your filter option : item:not(.unselectable)
Html :
<ul id="selectable">
<li class="unselectable"> 1</li>
<li> 2</li>
<li> 3</li>
</ul>
Jquery :
$( "#selectable" ).selectable({
filter:"li:not(.unselectable)"
});
You'll be able to select all the li children of #selectable, excepted the li which has the .unselectable class. Then you just have to toggle this class when it is necessary.