初始化后禁用可选子项

Question

我看不出这怎么行，但这是我的问题...

我在页面上有一系列可选组 - 每个组都是表格中的一行，td 中的 div 是可选组。并非所有的 td 都包含一个可选择项 - 这由“忽略”类的存在表示。灯箱打开，然后需要以其中一个可选组中的几个子项为目标，并在灯箱关闭时禁止它们在其组中可选。

我有这个 html（这是一个 sn-p，但准确）：

<tr id='row_17' data-booking_row='a room' data-booking_row_id='17'>
    <td class='booking_cell green'>
        <div data-date='2012-10-22' class='room_cell  selectable'>
            <div class='price ignore' style='display:block;'>&pound;5</div>
        </div>
    </td>
    <td class='booking_cell amber ignore'>
        <div data-date='2012-10-23' class='room_cell  ignore'>
            <div class='price ignore' style='display:block;'>&pound;5</div>
        </div>
    </td>
    <td class='booking_cell amber ignore'>
        <div data-date='2012-10-24' class='room_cell  ignore'>
            <div class='price ignore' style='display:block;'>&pound;2</div>
        </div>
    </td>
</tr>

selectable是由包含上面html的页面底部的这段代码启动的：

$(function() {
    $('#row_17').selectable({
        filter: 'div:not(.ignore)'
    });
});

然后，从灯箱中，我正在执行以下操作以尝试禁用相关的可选择项选择子项：

parent.$('#row_17 td div[data-date=2012-10-22]').removeClass('selectable');
parent.$('#row_17 td div[data-date=2012-10-22]').addClass('ignore');
parent.$('#row_17 td div[data-date=2012-10-22]').removeClass('green');
parent.$('#row_17 td div[data-date=2012-10-22]').addClass('amber');
parent.$('#row_17 td div[data-date=2012-10-22]').removeClass('ui-selected');
parent.$('#row_17 td div[data-date=2012-10-22]').removeClass('ui-selectee');

（添加 'amber' 类并删除 'green' 纯粹改变颜色）

无论如何，它们仍然是可选的，颜色确实会发生变化，并且如果我检查它，类都已按应有的方式添加和删除，但您仍然可以选择它。

我尝试在最后一个块的末尾添加这个：

parent.$('#row_17 td div[data-date=2012-10-22]').selectable('disable');

但是这个错误并告诉我“无法在初始化之前调用可选择的方法；试图调用方法‘禁用’”

有人有什么想法吗？新的 JQuery UI 站点中缺少上下文和示例，我真的很挣扎。

谢谢。

Answer 1

尝试使用 .ready() 这将等待文档准备好并且 DOM 已加载并可被操作。

$(document).ready(function() {
  parent.$('#row_17 td div[data-date=2012-10-22]').selectable('disable');
});

Answer 2

试试这个

parent.$('#row_17').selectable('option','cancel','td div[data-date=2012-10-22]');

Answer 3

$(document).ready(function() {
  parent.$('#row_17 td [div*="2012-10-22"').selectable('disable');
});