2

I have a reservation form that lists classes, with radio buttons, for reserving a class. If the class is full, a waitlist checkbox appears on the row with the class's radio button. In jQuery, if a full class radio button is clicked, I want jQuery to check the waitlist checkbox. The td class="wailist" will be in every row, but the checkbox will only be in the HTML if the class is full. My jQuery so far-

var $class_table = JQuery('table.courses');
$class_table.find('input.radio').click(function (event)
{
   //if this row has a td.waitlist with a checkbox in it then check that box
 });

Here is the HTML snippet:

<tr class="course_full">
<td class="course_select", colspan=2>
    <label>
        <input type="radio" name="course[1][1]"
                id="course_id_1_9"
               value="9"
                >
        Geometry 2                                              
    </label>
</td>                                       
<td class="credit_recovery"> 
    <label>
        <input type="checkbox" name="credit_recovery[1][9]"
                id="credit_recovery_id_1_9"
                >
    </label>
</td> 
<td class="waitlist">
        <label>
            <input type="checkbox" name="waitlist[1][9]"
                    id="waitlist_id_1_9"
                    >
        </label>
</td>

I've failed at every 'this' 'closest' 'find' etc. Maybe length needs to be involved?

4

3 に答える 3

2

clickイベントは機能していますか？:radioそうでない場合は、セレクターをお勧めします。

$class_table.find(":radio").click(function(event) {

そうである場合、次のステップは、見つかったラジオに関連するチェックボックスを見つけることです。@Imdadparentが提案したように（または親へのいくつかの呼び出し）、または代わりにclosest. コールバック内:

$(this).closest('tr').find('.waitlist :checkbox').attr('checked', true);

親行を見つけ（ラジオボタンがどれほど深くネストされていても）、次にclass で列内waitlistのチェックボックスを検索します。最後の呼び出しは、結果がfind空でない場合にのみ効果があります。jsFiddleでの作業例

構造をナビゲートするときに明示的にしたい場合は、HTML スニペットに従って、への 2 つの呼び出しと へparentの 1 つの呼び出しで正しい列を見つけることができます。siblings

$(this)
   .parent().parent().siblings('.waitlist')
   .find(':checkbox').attr('checked', true);

ここでの作業例は、最初のものと同じ結果を生成するはずです。

（注：答えを整理し、正しい内容を保持しました）

于 2012-05-11T04:29:39.103 に答える
1

あなたは試すことができます

$class_table.find('input.radio:first-child').click(function (event)

:first-child について詳しくは、first-child-selector にアクセスしてください。

于 2012-05-11T04:17:04.367 に答える
1

これを試して

 var $class_table = JQuery('table.courses');
    $class_table.find('input.radio').click(function (event)
    {
      if($(this).parent().hasClass("waitlist"))
      {
        //DO your thing
      }
    });

ラジオボタンが td の直接の子でない場合は、 .parent().parent() を実行する必要がある場合があります

あなたも試すことができます.parent().next(".waitlist") or .parent().prev(".waitlist")

動作しない場合はお知らせください

于 2012-05-11T04:21:58.573 に答える