jquery - 初期化後に選択可能な子を無効にする

Question

これがどのように機能しないのかわかりませんが、ここに私の問題があります...

ページに一連の選択可能なグループがあります。それぞれがテーブルの行であり、td 内の div が選択可能です。すべての td に選択可能要素が含まれているわけではありません。これは、'ignore' クラスの存在によって示されます。ライトボックスが開いたら、選択可能なグループの 1 つで複数の子をターゲットにし、ライトボックスを閉じたときにグループ内で選択できないようにする必要があります。

私はこの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');

しかし、これはエラーであり、「初期化の前に選択可能なメソッドを呼び出すことはできません。メソッド 'disable' を呼び出そうとしました」というメッセージが表示されます。

誰にもアイデアはありますか？私は、新しい JQuery UI サイトでコンテキストと例が不足していることに本当に苦労しています。

ありがとう。

Answer 1

.ready（）で試してください。これは、ドキュメントの準備が整い、DOMが読み込まれ、操作できるようになるまで待機します。

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

Answer 2

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

Answer 3

これを試して

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