2012-05-12 8 views
0

をチェックすることができるようにする:は一つだけ(承認/却下)チェックボックス更新

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

を私はそれぞれの唯一のチェックボックスを許可するユーザーを制限する方法(/はすべて拒否すべてを承認する)2つの列を持っていますか?ここ

は、画面の出力です:

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)" /> 
+1

私はそれがイメージであることを知っていましたが、チェックボックスをクリックしようとしても抵抗できませんでした。 – goat

+2

ラジオボタンを使用するのは問題になりませんか? –

+1

私の質問を更新します。はい、クライアントはチェックボックスを持っていますが、私はすでにラジオボタンを使用していると考えています。 –

答えて

2

問題のコメント欄に私の質問に対するあなたの答えに基づいて、ここは実用的な解決策です。静的なコントロールを持つHTMLテーブルを使用しました。あなたはそのコンセプトを適用できるはずです。 asp.netのチェックボックスにspanタグ内にネストされているので

EDITED

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

ではなく、以前の1のこの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"); 
       }); 
      }); 
     }); 
+0

htmlのコントロールで期待どおりに動作するので、私はページを実行し、すべてのチェックボックスを選択し、私はこのエラーメッセージ '$ ).attr( 'id')is undefined ' - –

+0

私の質問が更新されました。あなたが投稿した更新コードをコピー&ペーストしてテストすることができます。 –

+0

@AbuHamzahは私の編集された答えをチェックします。今それは動作するはずです。チェックボックスのような入力セレクタの問題は、スパンタグの一部としてレンダリングされます。 –

4

は、使用チェックボックスではなく、ラジオボタンを使用していけない、それらが設計されていますこのため。

0

私はラジオボタンの使用に同意します。 [すべて選択]チェックボックスをオンにして、ラジオボタンをオンにすると無効にすることができます。

チェックボックスを使用する必要がある場合は、デフォルトのクリック(確認)操作を上書きするだけで、他のすべてのチェックボックスをオフにすることができます。それはライブラリの有無にかかわらずかなり基本的なjavascriptでなければなりません。トリックを行う必要があります

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

0

はこれを試してみてください。

0

ラジオボタンを使用すると、すべて選択機能が使用できません。

あなたはグループで同じクラスのチェックボックスのすべてを与えるし、クリックされたものを確認したりオフにしながら、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 
}); 

しかし、より良い選択おそらく "上記のどれも"オプションのないラジオボタンコントロールを使用することでしょう。あなたは妥当性検査を行うことができます(質問に全く答えませんでしたか?)

関連する問題