使用复选框(父级)启用|禁用无线电(子)

时间:2011-02-08 10:38:15

标签: php jquery checkbox radio-button

我有一个像这样的复选框和无线电组的列表:

<table>
<tr><td colspan=3><input type=checkbox class="filter-checkbox" name=serv1 value=1>ВъездАвто</td></tr> 
<tr>
<td><input type=radio id=servch1 name=servch1 value=6000><a>г/п 10Т</a></td>
<td><a>Сумма:&nbsp;6000</a></td>
<td><a>НДС:&nbsp;1200</a></td>
</tr> 
<tr>

<td><input type=radio id=servch1 name=servch1 value=4200><a>г/п 7Т</a></td>
<td><a>Сумма:&nbsp;4200</a></td>
<td><a>НДС:&nbsp;840</a></td>
</tr> 

<tr>
<td><input type=radio id=servch1 name=servch1 value=3000><a>г/п 5Т</a></td>
<td><a>Сумма:&nbsp;3000</a></td>
<td><a>НДС:&nbsp;600</a></td>
</tr> 

<tr><td><input type=radio id=servch1 name=servch1 value=1800><a>г/п 3Т</a></td>
<td><a>Сумма:&nbsp;1800</a></td>
<td><a>НДС:&nbsp;360</a></td>
</tr> 

<tr><td colspan=3><input type=checkbox class="filter-checkbox" name=serv2 value=2>ХранСутки40фут</td></tr> 
<tr>
<td><input type=radio id=servch2 name=servch2 value=5300><a>гружен.</a></td>
<td><a>Сумма:&nbsp;5300</a></td>
<td><a>НДС:&nbsp;1060</a></td>
</tr> 

<tr><td><input type=radio id=servch2 name=servch2 value=3000><a>порожн.</a></td>
<td><a>Сумма:&nbsp;3000</a></td>
<td><a>НДС:&nbsp;600</a></td>
</tr> 

<tr><td colspan=3><input type=checkbox class="filter-checkbox" name=serv3 value=3>ХранСутки20фут</td>
</tr> 
<tr><td><input type=radio id=servch3 name=servch3 value=2600><a>гружен.</a></td>
<td><a>Сумма:&nbsp;2600</a></td>
<td><a>НДС:&nbsp;520</a></td>
</tr> 

<tr><td><input type=radio id=servch3 name=servch3 value=1600><a>порожн.</a></td>
<td><a>Сумма:&nbsp;1600</a></td>
<td><a>НДС:&nbsp;320</a></td>
</tr> 

<tr><td colspan=3><input type=checkbox class="filter-checkbox" name=serv4 value=4>Очистка конт.</td></tr> 
<tr>
<td><input type=radio id=servch4 name=servch4 value=2700><a>среднетон.</a></td>
<td><a>Сумма:&nbsp;2700</a></td>
<td><a>НДС:&nbsp;540</a></td>
</tr> 

<tr><td><input type=radio id=servch4 name=servch4 value=6300><a>20фут</a></td>
<td><a>Сумма:&nbsp;6300</a></td>
<td><a>НДС:&nbsp;1260</a></td>
</tr> 

<tr><td><input type=radio id=servch4 name=servch4 value=11500><a>40фут</a></td>
<td><a>Сумма:&nbsp;11500</a></td>
<td><a>НДС:&nbsp;2300</a></td></tr> <tr><td></table>

我希望启用|禁用子广播组与其父级复选框。请帮助我。

1 个答案:

答案 0 :(得分:0)

提供您的HTML不会受到伤害......

让我们说它看起来像这样:

<div>
  <input type="checkbox" value="1" name="c1" />
  <input type="radio" name="r1" value="1" />
  <input type="radio" name="r2" value="1" />
</div>
<div>
  <input type="checkbox" value="1" name="c1" />
  <input type="radio" name="r1" value="1" />
  <input type="radio" name="r2" value="1" />
</div>

使用jQuery,您可以执行以下操作:

$(function(){
  $("input:checkbox").click(function(){
    if ( $(this).is(":checked") ){
      $(this).nextAll("input:radio").attr("disabled",true);
    }
    else{
      $(this).nextAll("input:radio").attr("disabled",null);
    }
  });
});

修改

我建议您首先将表格划分为TBODY:

    <table>
        <tbody>
            <tr>
                <td colspan=3><input type=checkbox class="filter-checkbox" name=serv1 value=1>ВъездАвто</td>
            </tr> 
            <tr>
                <td><input type=radio id=servch1 name=servch1 value=6000><a>г/п 10Т</a></td>
                <td><a>Сумма:&nbsp;6000</a></td>
                <td><a>НДС:&nbsp;1200</a></td>
            </tr> 
            <tr>
                <td><input type=radio id=servch1 name=servch1 value=4200><a>г/п 7Т</a></td>
                <td><a>Сумма:&nbsp;4200</a></td>
                <td><a>НДС:&nbsp;840</a></td>
            </tr> 
            <tr>
                <td><input type=radio id=servch1 name=servch1 value=3000><a>г/п 5Т</a></td>
                <td><a>Сумма:&nbsp;3000</a></td>
                <td><a>НДС:&nbsp;600</a></td>
            </tr> 
            <tr>
                <td><input type=radio id=servch1 name=servch1 value=1800><a>г/п 3Т</a></td>
                <td><a>Сумма:&nbsp;1800</a></td>
                <td><a>НДС:&nbsp;360</a></td>
            </tr> 
        </tbody>
        <tbody>
            <tr>
                <td colspan=3><input type=checkbox class="filter-checkbox" name=serv2 value=2>ХранСутки40фут</td>
            </tr> 
            <tr>
                <td><input type=radio id=servch2 name=servch2 value=5300><a>гружен.</a></td>
                <td><a>Сумма:&nbsp;5300</a></td>
                <td><a>НДС:&nbsp;1060</a></td>
            </tr> 
            <tr>
                <td><input type=radio id=servch2 name=servch2 value=3000><a>порожн.</a></td>
                <td><a>Сумма:&nbsp;3000</a></td>
                <td><a>НДС:&nbsp;600</a></td>
            </tr>
            .... 

然后你可以这样做:

$(function(){
  $("table input:checkbox").click(function(){
    if ( $(this).is(":checked") ){
      $(this).parents("tbody").find("input:radio").attr("disabled",true);
    }
    else{
      $(this).parents("tbody").find("input:radio").attr("disabled",null);
    }
});

});