Enable|Disable radio(child) with checkbox (parent)
I've a list of checkboxes and radiogroups like this:
<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>Сумма: 6000</a></td>
<td><a>НДС: 1200</a></td>
</tr>
<tr>
<td><input type=radio id=servch1 name=servch1 value=4200><a>г/п 7Т</a></td>
<td><a>Сумма: 4200</a></td>
<td><a>НДС: 840</a></td>
</tr>
<tr>
<td><input type=radio id=servch1 name=servch1 value=3000><a>г/п 5Т</a></td>
<td><a>Сумма: 3000</a></td>
<td><a>НДС: 600</a></td>
</tr>
<tr><td><input type=radio id=servch1 name=servch1 value=1800><a>г/п 3Т</a></td>
<td><a>Сумма: 1800</a></td>
<td><a>НДС: 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>Сумма: 5300</a></td>
<td><a>НДС: 1060</a></td>
</tr>
<tr><td><input type=radio id=servch2 name=servch2 value=3000><a>порожн.</a></td>
<td><a>Сумма: 3000</a></td>
<td><a>НДС: 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>Сумма: 2600</a></td>
<td><a>НДС: 520</a></td>
</tr>
<tr><td><input type=radio id=servch3 name=servch3 value=1600><a>порожн.</a></td>
<td><a>Сумма: 1600</a></td>
<td><a>НДС: 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>Сумма: 2700</a></td>
<td><a>НДС: 540</a></td>
</tr>
<tr><td><input type=radio id=servch4 name=servch4 value=6300><a>20фут</a></td>
<td><a>Сумма: 6300</a></td>
<td><a>НДС: 1260</a></td>
</tr>
<tr><td><input type=radio id=servch4 name=servch4 value=11500><a>40фут</a></td>
<td><a>Сумма: 11500</a></td>
<td><a>开发者_运维知识库;НДС: 2300</a></td></tr> <tr><td></table>
I want enable|disable child radio group with his parent checkbox. Pls help me.
Providing your HTML wouldn't hurt...
Let's say it looks like this:
<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>
With jQuery you can do something like this:
$(function(){
$("input:checkbox").click(function(){
if ( $(this).is(":checked") ){
$(this).nextAll("input:radio").attr("disabled",true);
}
else{
$(this).nextAll("input:radio").attr("disabled",null);
}
});
});
EDIT
I'd suggest first you divide your table into TBODYs:
<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>Сумма: 6000</a></td>
<td><a>НДС: 1200</a></td>
</tr>
<tr>
<td><input type=radio id=servch1 name=servch1 value=4200><a>г/п 7Т</a></td>
<td><a>Сумма: 4200</a></td>
<td><a>НДС: 840</a></td>
</tr>
<tr>
<td><input type=radio id=servch1 name=servch1 value=3000><a>г/п 5Т</a></td>
<td><a>Сумма: 3000</a></td>
<td><a>НДС: 600</a></td>
</tr>
<tr>
<td><input type=radio id=servch1 name=servch1 value=1800><a>г/п 3Т</a></td>
<td><a>Сумма: 1800</a></td>
<td><a>НДС: 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>Сумма: 5300</a></td>
<td><a>НДС: 1060</a></td>
</tr>
<tr>
<td><input type=radio id=servch2 name=servch2 value=3000><a>порожн.</a></td>
<td><a>Сумма: 3000</a></td>
<td><a>НДС: 600</a></td>
</tr>
....
Then you can do this:
$(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);
}
});
});
精彩评论