Question

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

我在页面上有一系列可选择的组 - 每个组都是表格中的一行，而td中的div是可选择的组。并非所有td都包含一个可选择的 - 这是由'ignore'类的存在表示的。灯箱打开然后需要在其中一个可选组中定位几个孩子，并在灯箱关闭后禁止他们在组内选择。

我有这个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>

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');

但是这个错误告诉我“在初始化之前无法调用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');
});

初始化后禁用可选择的子项

3 个答案: