在选择复选框时禁用指定复选框 [英] On selecting a checkbox disable spefic checkboxes
本文介绍了在选择复选框时禁用指定复选框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个复选框表，在选择某个复选框时，我需要禁用特定的复选框。我可以做到这一点与jquery，但我有困难，区分在我的表中的复选框。
这是我的代码：
< table id =mytb class =table table-hover table-condensed>
< thead>
< tr>
< th style =width：25％;>栏1< / th>
< th style =width：25％>栏2< / th>
< th style =width：25％>第3列< / th>
< th style =width：25％>第4栏< / th>
< / tr>
< / thead>
< tbody>
< tr>
< td>第1行< / td>
< td class =vcenter>< input type =checkboxid =row1value =1/>< / td>
< td class =vcenter>< input type =checkboxid =row1value =2/>< / td&
< td class =vcenter>< input type =checkboxid =row1value =3/>< / td>
< / tr>
< tr>
< td>第2行< / td>
< td class =vcenter>< input type =checkboxid =row2value =1/>< / td>
< td class =vcenter>< input type =checkboxid =row2value =2/>< / td>
< td class =vcenter>< input type =checkboxid =row2value =3/>< / td>
< / tr>
< tr>
< td>第3行< / td>
< td class =vcenter>< input type =checkboxid =row3value =1/>< / td>
< td class =vcenter>< input type =checkboxid =row3value =2/>< / td>
< td class =vcenter>< input type =checkboxid =row3value =3/>< / td>
< / tr>
< tr>
< td>第4行< / td>
< td class =vcenter>< input type =checkboxid =row4value =1/>< / td>
< td class =vcenter>< input type =checkboxid =row4value =2/>< / td
< td class =vcenter>< input type =checkboxid =row4value =3/>< / td>
< / tr>
< tr>
< td>第5行< / td>
< td class =vcenter>< input type =checkboxid =row5value =1/>< / td>
< td class =vcenter>< input type =checkboxid =row5value =2/>< / td>
< td class =vcenter>< input type =checkboxid =row5value =3/>< / td>
< / tr>
< tr>
< td>第6行< / td>
< td class =vcenter>< input type =checkboxid =row6value =1/>< / td>
< td class =vcenter>< input type =checkboxid =row6value =2/>< / td>
< td class =vcenter>< input type =checkboxid = row6value =3/>< / td>
< / tr>
< / tbody>
< / table>
：
-
如果我选择id =row1value =3的复选框，我需要禁用所有其他
-
如果我从任何其他行选择一个复选框，即行2,3,4,5或6，其中value = 3，那么I需要禁用同一行中的所有其他复选框（其中关联的值为1和2）。
- 如果我从任何其他行选择复选框，即行2,3,4,5或6，其中值= 2，那么我需要禁用同一行中值为1的复选框。
解决方案
请在上面的jQuery中添加以下代码，其中的其他if语句是：
if（this.id =='row1'&& this.value =='1'）{
if（$（this）.is（'： check（'））{
$（'＃new_user_form *'）。filter（'：checkbox'）。each（function（）{
if（this.id =='row1'&& this.value =='1'）{
} else {
$（this）.attr（disabled，true）;
}
}）;
} else {
$（'＃new_user_form *'）。filter（'：checkbox'）。 & this.value =='1'）{
} else {
$（this）.attr（disabled，false）;
}
}
}
}
if（this.id =='row1'&& this.value =='2'）{
if（$（this）.is （'：checked'））{
$（'＃new_user_form *'）。filter（'：checkbox'）。each（function（）{
if（this.id =='row1'& ;& this.value =='2'）{
} else {
$（this）.attr（disabled，true）;
}
}
} else {
$（'＃new_user_form *'）。filter（'：checkbox'）。 & this.value =='2'）{
} else {
$（this）.attr（disabled，false）;
}
}
}
}
I have a table of checkboxes, on selecting a certain checkbox I need to disable specific checkboxes. I can do this with jquery but I'm having trouble with distinguishing between the checkboxes present in my table.
Here's my code:
<table id="mytb" class="table table-hover table-condensed">
<thead>
<tr>
<th style="width: 25%;">Column 1</th>
<th style="width: 25%">Column 2</th>
<th style="width: 25%">Column 3</th>
<th style="width: 25%">Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1</td>
<td class="vcenter"><input type="checkbox" id="row1" value="1"/></td>
<td class="vcenter"><input type="checkbox" id="row1" value="2"/></td>
<td class="vcenter"><input type="checkbox" id="row1" value="3"/></td>
</tr>
<tr>
<td>Row 2</td>
<td class="vcenter"><input type="checkbox" id="row2" value="1"/></td>
<td class="vcenter"><input type="checkbox" id="row2" value="2"/></td>
<td class="vcenter"><input type="checkbox" id="row2" value="3"/></td>
</tr>
<tr>
<td>Row 3</td>
<td class="vcenter"><input type="checkbox" id="row3" value="1"/></td>
<td class="vcenter"><input type="checkbox" id="row3" value="2"/></td>
<td class="vcenter"><input type="checkbox" id="row3" value="3"/></td>
</tr>
<tr>
<td>Row 4</td>
<td class="vcenter"><input type="checkbox" id="row4" value="1"/></td>
<td class="vcenter"><input type="checkbox" id="row4" value="2"/></td>
<td class="vcenter"><input type="checkbox" id="row4" value="3"/></td>
</tr>
<tr>
<td>Row 5</td>
<td class="vcenter"><input type="checkbox" id="row5" value="1"/></td>
<td class="vcenter"><input type="checkbox" id="row5" value="2"/></td>
<td class="vcenter"><input type="checkbox" id="row5" value="3"/></td>
</tr>
<tr>
<td>Row 6</td>
<td class="vcenter"><input type="checkbox" id="row6" value="1"/></td>
<td class="vcenter"><input type="checkbox" id="row6" value="2"/></td>
<td class="vcenter"><input type="checkbox" id=row6" value="3"/></td>
</tr>
</tbody>
</table>
So here are my conditions:
If I select the checkbox with id="row1" value="3", I need to disable all the other check boxes present.
If I select a checkbox from any other row, that is row 2,3,4,5 or 6 where value=3 then I need to disable all the other checkboxes in the same row(where the values associated are 1 and 2).
If I select a checkbox from any other row, that is row 2,3,4,5 or 6 where value=2 then I need to disable the checkbox in the same row where value=1.
解决方案
Please add following code to the jQuery above, inside change function where other if statements are:
if(this.id=='row1' && this.value=='1') {
if($(this).is(':checked')) {
$('#new_user_form *').filter(':checkbox').each(function(){
if(this.id=='row1' && this.value=='1') {
} else {
$(this).attr("disabled",true);
}
});
} else {
$('#new_user_form *').filter(':checkbox').each(function(){
if(this.id=='row1' && this.value=='1') {
} else {
$(this).attr("disabled",false);
}
});
}
}
if(this.id=='row1' && this.value=='2') {
if($(this).is(':checked')) {
$('#new_user_form *').filter(':checkbox').each(function(){
if(this.id=='row1' && this.value=='2') {
} else {
$(this).attr("disabled",true);
}
});
} else {
$('#new_user_form *').filter(':checkbox').each(function(){
if(this.id=='row1' && this.value=='2') {
} else {
$(this).attr("disabled",false);
}
});
}
}
这篇关于在选择复选框时禁用指定复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
