0

私は5つのチェックボックスを持っています。そのうちの 4 つは、5 番目がチェックされているかどうかに基づいて表示/非表示にする必要があります。私はJQueryを使ってこれをやろうとしていますが、何らかの理由でうまくいきません。チェック/チェックされていないプロパティを正しくチェックするコードのセクションをヒットしていますが、実際の表示/非表示コードが正しくありません。切り替える必要があるチェックボックスに CSS クラスを使用して試しました。JQuery と .aspx コードは次のとおりです。

$(function () {
      $('#<%=chkFrench.ClientID %>').unbind('click');

      $('#<%=chkFrench.ClientID %>').click(function () {

          enable_cb();
          $(".EnhancedFrench").click(enable_cb);
      });
  });

  function enable_cb() {
      if (this.checked) {
          alert("show");
          $('.EnhancedFrench').show();
      } else {
        alert("hide");
          $('.EnhancedFrench').hide();
      }
  }

  <table>
    <tr>
     <td>Display Live (Fr):</td>
     <td><asp:CheckBox runat="server" ID="chkFrench" CssClass="EnhancedFrench" />/td>
    </tr>
    <tr>
     <td>French1</td>
     <td><asp:CheckBox runat="server" ID="CheckBox1" CssClass="EnhancedFrench" /></td>
    </tr>
    <tr>
     <td>French2</td>
     <td><asp:CheckBox runat="server" ID="CheckBox2" CssClass="EnhancedFrench" /></td>
    <tr>
    <tr>
     <td>French3</td>
     <td><asp:CheckBox runat="server" ID="CheckBox3" CssClass="EnhancedFrench" /></td>
    </tr>
    <tr>
     <td>French4</td>
     <td><asp:CheckBox runat="server" ID="CheckBox4" CssClass="EnhancedFrench" /></td>
    </tr>
 </table>
4

4 に答える 4

0

簡単なサンプルを実行しました。提供されたコードについては、以下のようなものを使用してみてください。

最後のチェックボックスがチェックされている場合、これはすべてのチェックボックスを非表示にする必要があります

<script type="text/javascript">

    $(function () {
        $('[id$="chkFrench"]').bind('change', function () { enable_cb(); });
    });

    function enable_cb() {
        if ($('[id$="chkFrench"]').is(':checked')) {
            $('span.EnhancedFrench:gt(0)').hide();
        }
        else {
            $('span.EnhancedFrench:gt(0)').show();
        }
    }

</script>
于 2013-03-20T16:12:51.760 に答える
0

チェックボックスをコンテナに保持し、そのコンテナを使用して非表示を表示することをお勧めします。

于 2013-03-20T16:18:19.417 に答える
0

私はそれを確認しませんでしたが、動作するはずです

$(function () {
  $('#<%=chkFrench.ClientID %>').click(function(){
  if($(this).is(':checked')){
     $('.EnhancedFrench').show();

 }else{
   $('.EnhancedFrench').hide();
 }
  });

});

于 2013-03-20T16:06:45.860 に答える
0

次の方法でもそれを行うことができます。

$('tr:nth-child(5)').find('input[type=checkbox]').on('change',function(){
    $(this).parent('td').parent('tr').siblings().fadeToggle();
});
于 2013-03-20T16:51:17.313 に答える