只允许一个（批准/拒绝）复选框被选中

更新：只允许一个（批准/拒绝）复选框被选中

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="chkbox_checked_uncheked.aspx.cs" 
    Inherits="Ediable_Repeater.chkbox_checked_uncheked" %> 

<!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 runat="server"> 
    <title></title> 
    <script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script> 

    <script type="text/javascript"> 

     $(document).ready(function() { 
      $('#C1All').click(function() { 
       debugger 
       $('.col1').attr("checked", $('#C1All').attr("checked")); 
       $('.col2').removeAttr("checked"); 
       $('#C2All').removeAttr("checked"); 
      }); 

      $('#C2All').click(function() { 
       debugger 
       $('.col2').attr("checked", $('#C2All').attr("checked")); 
       $('.col1').removeAttr("checked"); 
       $('#C1All').removeAttr("checked"); 
      }); 

      $('.col1').each(function() { 
       $(this).click(function() { 
        var id = $(this).attr('id'); 
        debugger 
        var coresId = id.replace('C1', 'C2'); 
        $('#' + coresId).removeAttr("checked"); 
        $('#C1All').removeAttr("checked"); 
        $('#C2All').removeAttr("checked"); 
       }); 
      }); 

      $('.col2').each(function() { 
       $(this).click(function() { 
        var id = $(this).attr('id'); 
        var coresId = id.replace('C2', 'C1'); 
        debugger 
        $('#' + coresId).removeAttr("checked"); 
        $('#C1All').removeAttr("checked"); 
        $('#C2All').removeAttr("checked"); 
       }); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <div> 
      <table border="1"> 
       <tr> 
        <td> 
         <asp:CheckBox ID="C1All" runat="server" class="col1" Text="approve all" /> 
        </td> 
        <td> 
         <asp:CheckBox ID="C2All" runat="server" class="col2" Text="Reject all" /> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <asp:CheckBox ID="C101" runat="server" class="col1" Text="john 0" /> 
        </td> 
        <td> 
         <asp:CheckBox ID="C201" runat="server" class="col2" Text="john 0" /> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <asp:CheckBox ID="C102" runat="server" class="col1" Text="john 1" /> 
        </td> 
        <td> 
         <asp:CheckBox ID="C202" runat="server" class="col2" Text="john all" /> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <asp:CheckBox ID="C103" runat="server" class="col1" Text="john 2" /> 
        </td> 
        <td> 
         <asp:CheckBox ID="C203" runat="server" class="col2" Text="John 2" /> 
        </td> 
       </tr> 
      </table> 
     </div> 
    </div> 
    </form> 
</body> 
</html>

我有一个两列（批准所有/拒绝所有的）我怎么可以限制用户只允许一个每个复选框？

这里是屏幕的输出：

enter image description here

我已经试过这样的事情，但没有奏效：

function SelectApproveAllCheckboxes(chk, selector) 
    {  
     $('#<%=gv.ClientID%>').find(selector + " input:checkbox").each(function() 
     {      
       $(this).prop("checked", $(chk).prop("checked"));  
     }); 
    } 
function SelectRejectAllCheckboxes(chk, selector) 
{  
    $('#<%=gv.ClientID%>').find(selector + " input:checkbox").each(function() 
    {      
      $(this).prop("checked", $(chk).prop("checked"));  
    }); 
} 

<asp:CheckBox ID="chkAll" runat="server" onclick="SelectApproveAllCheckboxes(this, '.approve)" />  
<asp:CheckBox ID="chkAll1" runat="server" onclick="SelectRejectAllCheckboxes(this, '.reject)" />

来源

2012-05-12 Nick Kahn

我知道这是一个图像......但无法抗拒试图点击复选框。 – goat

使用单选按钮是不可能的？ –

我更新我的问题，是的，但客户希望有复选框，我已经想过使用单选按钮 –

好的基于你对我的问题的回答你的问题的评论部分，这里是一个工作的解决方案。我使用了一个带有静态控件的HTML表格;但你应该能够应用这些概念。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <table border="1"> 
      <tr> 
       <td><input type="checkbox" id="C1All" />Approve All</td> 
       <td><input type="checkbox" id="C2All" />Reject All</td> 
      </tr> 
      <tr> 
       <td><input type="checkbox" id="C101" class="col1" />John 0</td> 
       <td><input type="checkbox" id="C201" class="col2" />John 0</td> 
      </tr> 
      <tr> 
       <td><input type="checkbox" id="C102" class="col1" />John 1</td> 
       <td><input type="checkbox" id="C202" class="col2" />John 1</td> 
      </tr> 
      <tr> 
       <td><input type="checkbox" id="C103" class="col1" />John 2</td> 
       <td><input type="checkbox" id="C203" class="col2" />John 2</td> 
      </tr> 
     </table> 
    </div> 
    </form> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#C1All').click(function() { 
       $('.col1').attr("checked", $('#C1All').attr("checked")); 
       $('.col2').removeAttr("checked"); 
       $('#C2All').removeAttr("checked"); 
      }); 

      $('#C2All').click(function() { 
       $('.col2').attr("checked", $('#C2All').attr("checked")); 
       $('.col1').removeAttr("checked"); 
       $('#C1All').removeAttr("checked"); 
      }); 

      $('.col1').each(function() { 
       $(this).click(function() { 
        var id = $(this).attr('id'); 
        var coresId = id.replace('C1', 'C2'); 
        $('#' + coresId).removeAttr("checked"); 
        $('#C1All').removeAttr("checked"); 
        $('#C2All').removeAttr("checked"); 
       }); 
      }); 

      $('.col2').each(function() { 
       $(this).click(function() { 
        var id = $(this).attr('id'); 
        var coresId = id.replace('C2', 'C1'); 
        $('#' + coresId).removeAttr("checked"); 
        $('#C1All').removeAttr("checked"); 
        $('#C2All').removeAttr("checked"); 
       }); 
      }); 
     }); 
    </script> 
</body> 

</html>

EDITED

因为在asp.net复选框嵌套在跨距标签内使用这个jQuery代替了以前的一个。

 $(document).ready(function() { 
      $('#C1All').click(function() { 
       $('.col1 > input').attr("checked", $('#C1All').attr("checked")); 
       $('.col2 > input').removeAttr("checked"); 
       $('#C2All').removeAttr("checked"); 
      }); 

      $('#C2All').click(function() { 
       $('.col2 > input').attr("checked", $('#C2All').attr("checked")); 
       $('.col1 > input').removeAttr("checked"); 
       $('#C1All').removeAttr("checked"); 
      }); 

      $('.col1').each(function() { 
       $(this).click(function() { 
        var id = $("input", this).attr('id'); 
        var coresId = id.replace('C1', 'C2'); 
        $('#' + coresId).removeAttr("checked"); 
        $('#C1All').removeAttr("checked"); 
        $('#C2All').removeAttr("checked"); 
       }); 
      }); 

      $('.col2').each(function() { 
       $(this).click(function() { 
        var id = $("input", this).attr('id'); 
        var coresId = id.replace('C2', 'C1'); 
        $('#' + coresId).removeAttr("checked"); 
        $('#C1All').removeAttr("checked"); 
        $('#C2All').removeAttr("checked"); 
       }); 
      }); 
     });

来源

2012-05-12 01:36:17

做工精细与HTML控件的预期，所以我就开始发生变化，从HTML控件转换到asp.net当我运行的页面，并选择批准所有的复选框，然后我得到这个错误信息'$（本）.attr（“ID”）是undefined' - –

更新我的问题，你可以复制和粘贴更新的代码我已经发布，并测试了，我期待的错误，如果你觉得有它张贴。 –

@AbuHamzah检查我编辑的答案。现在它应该工作。作为复选框的输入选择器的一些问题被渲染为span标签的一部分。 –

不使用复选框使用单选按钮代替，它们被设计为了这。

来源

2012-05-12 00:14:45 Stuart

我同意使用单选按钮。您仍然可以选择“全选”复选框，并可以在选中时禁用单选按钮。

如果您必须使用复选框，则可以简单地覆盖默认的单击（检查）操作以首先取消选中所有其他框。它应该是非常基本的JavaScript有或没有库。

来源

2012-05-12 00:27:15

试试这个：

$('input:checkbox').click(function(){ 
    $('input:checked').removeAttr('checked'); 
    $(this).attr('checked', 'checked'); 
});

这应该做的伎俩。

来源

2012-05-12 00:55:38 CDubbz31

如果您使用单选按钮prolly，您将无法获得全选功能。

你可以给所有的组同一类中的复选框，做这样的事情使用JQuery，而选中或取消选中被点击的一个取消他们都：

$('.checkbox').click(function{ 
// save the original checked state of the one we're clicking: 
var checked = $(this).attr('checked'); 
$('.checkbox').attr('checked', false); // uncheck all of the boxes 
$(this).attr('checked', !checked); // invert the original state 
});

但更好的选择可能会使用带有“以上都不是”选项的单选按钮控件。这样，你可以做验证（这是否回答了这个问题呢？）

来源

2012-05-12 00:56:50 kishanio

只允许一个（批准/拒绝）复选框被选中

回答

相关问题