1

我有一个复选框表，在选择某个复选框时，我需要禁用特定的复选框。我可以用 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>

所以这是我的条件：

  1. 如果我选择 id="row1" value="3" 的复选框，我需要禁用所有其他存在的复选框。

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

  3. 如果我从任何其他行中选择一个复选框，即 value=2 的第 2、3、4、5 或 6 行，那么我需要禁用 value=1 的同一行中的复选框。

4

4 回答 4

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>

复制粘贴并享受:) 干杯

于 2013-09-20T09:44:33.800 回答
0

看看这个：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 代替，name 属性可以重复。

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

于 2013-09-20T08:43:38.193 回答
0

请在上面的 jQuery 中添加以下代码，在其他 if 语句所在的 change 函数中：

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);
            }
        });
    }
}
于 2013-09-20T11:44:09.907 回答
0

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 我根据第一个复选框选中或取消选中。

因此，请根据您的要求使用此代码。希望你得到我！

干杯！！

于 2013-09-20T08:42:21.667 回答