0

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

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

我有这个 html（它是一个片段，但准确）：

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

可选择由包含上述 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');

（“琥珀”类的添加和“绿色”的删除纯粹改变了颜色）

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

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

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

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

有没有人有任何想法？我真的为新的 JQuery UI 站点中缺少上下文和示例而苦苦挣扎。

谢谢。

4

3 回答 3

0 
$(document).ready(function() {
  parent.$('#row_17 td [div*="2012-10-22"').selectable('disable');
});
于 2012-11-04T10:48:08.120 回答
0

尝试这个

parent.$('#row_17').selectable('option','cancel','td div[data-date=2012-10-22]');
于 2012-10-22T21:20:00.607 回答
0

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

$(document).ready(function() {
  parent.$('#row_17 td div[data-date=2012-10-22]').selectable('disable');
});
于 2012-10-22T21:08:34.113 回答