Question

我有一个复选框表，在选择某个复选框时我需要禁用特定的复选框。我可以用jquery做到这一点，但是我在区分表格中的复选框时遇到了麻烦。

这是我的代码：

<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>

所以这是我的条件：

如果我选中id =“row1”value =“3”的复选框，我需要禁用所有其他复选框。
如果我从任何其他行中选择一个复选框，即行2,3,4,5或6，其中value = 3，那么我需要禁用同一行中的所有其他复选框（其中值与关联）是1和2）。
如果我从任何其他行中选择一个复选框，即第2,3,4,5或6行，其中value = 2，那么我需要禁用值= 1的同一行中的复选框。

Answer 1

您好请找到经过测试和验证的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $('#new_user_form *').filter(':checkbox').change(function() {
            if(this.id=='row1' && this.value=='3' && $(this).is(':checked')) {
                $('#new_user_form *').filter(':checkbox').each(function(){
                    if(this.id=='row1' && this.value=='3') {
                    } else {
                        $(this).attr("checked",false);
                    }
                });
            }
            if((this.id=='row2' || this.id=='row3' || this.id=='row4' || this.id=='row5' || this.id=='row6') && this.value=='3') {
                var checkedId = this.id;
                var checkedOrNot = $(this).is(':checked');
                $('#new_user_form *').filter(':checkbox').each(function(){
                    if(this.id==checkedId && (this.value=='1' || this.value=='2')) {
                        if(checkedOrNot) {
                            $(this).attr("disabled",true);
                        } else {
                            $(this).attr("disabled",false);
                        }
                    }
                });
            }
            if((this.id=='row2' || this.id=='row3' || this.id=='row4' || this.id=='row5' || this.id=='row6') && this.value=='2') {
                var checkedId = this.id;
                var checkedOrNot = $(this).is(':checked');
                $('#new_user_form *').filter(':checkbox').each(function(){
                    if(this.id==checkedId && this.value=='1') {
                        if(checkedOrNot) {
                            $(this).attr("disabled",true);
                        } else {
                            $(this).attr("disabled",false);
                        }
                    }
                });
            }
        });
    });
</script>
</head>

<body>
<form id="new_user_form">
<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>
</form>
</body>
</html>

复制粘贴并享受:)欢呼

Answer 2

Jquery代码：

 $('#chkPersonalDetails').click(function () {
        var checkedStatus = this.checked;
        $('span[rel=pe]').find('input').attr("checked", checkedStatus);
    });

ASPX代码。

  <asp:CheckBox ID="chkPersonalDetails" runat="server" Text="Personal Details" 
    rel="pe"/>
     <asp:CheckBox ID="chkSearchAddress" runat="server" Text="Address"
      rel="pe"/>
     <asp:CheckBox ID="chkSearchPhone" runat="server" Text="Phone"
       rel="pe"/>
      <asp:CheckBox ID="chkSearchSex" runat="server" Text="Sex" rel="pe"/>

所以我正在做的是选择所有具有rel属性的复选框 rel = pre我正在检查或取消选中第一个复选框。

因此请根据您的要求使用此代码。希望你能帮帮我!!

干杯!!

Answer 3

看看这个：http://api.jquery.com/multiple-attribute-selector/。

未检查实际复选框ID但基于DOM位置的尝试是：

$( ":checkbox" ).on('click', function(e){
   var originatingCheckbox = this;
   var siblings =$(originatingCheckbox).parentUntil('tr').find(":checkbox");
   siblings.each(function(e){
      if(originatingCheckbox != this)
      {
         if(originatingCheckbox.checked){
            this.checked = false;
            $(this).attr("disabled", true);
         }else{
            $(this).removeAttr("disabled");
         }
      }
   });
});

但是，HTML文档应该包含具有唯一ID的元素，而是使用名称，可以重复使用name属性。

您也可以使用document.getElementsByName('row1')，它将返回与该名称匹配的元素数组。您可以执行一个简单的循环来检查每个值的值以及是否已选中它们。

Answer 4

请将以下代码添加到上面的jQuery，更改函数内部，其他if语句为：

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);
            }
        });
    }
}

选中复选框后，禁用特定复选框

4 个答案: