0

アクティブなチェックボックスとハイライトチェックボックスがあります。

ここに画像の説明を入力

アクティブがチェックされているときに、アクティブチェックボックスが自動的にハイライトチェックボックスをチェックするようにしたいと思います。prop()を探索するか、属性を追加する醜いバインドを行う かについて、私はフェンスにぶつかっています。

私は最終的に最も乾燥した推奨事項を探しています。もちろん、コードスニペットは大歓迎です!!!

各チェックボックスが多少面倒です (ただし、テーブル内の隣同士に独自のフォームがあり、変更時に ajax で送信されます。 

    <td>
  <% form_for(:catalog_item, catalog_item.item, :url => set_admin_catalog_item_path(catalog_item), :html => {:class => 'ajax'}) do |f| %>
    <%= f.check_box :active %>
  <% end %>
</td>
<td>
  <% form_for(:catalog_item, catalog_item, :url => set_admin_catalog_item_path(catalog_item), :html => {:class => 'ajax'}) do |f| %>
  <%= f.check_box :highlight %>
  <% end %>
</td>
4

2 に答える 2

3

このフィドルをチェック

$(function() {
    $('.active').on('click', function(){
        $(this).next().attr('checked' , $(this).is(':checked'));
    });

});​

また、使用することができます

$(this).next().prop('checked' , $(this).is(':checked'));
于 2012-09-26T21:28:32.880 に答える
1

jsフィドル

次のような HTML が与えられた場合:

HTML

<div id="ActHigh">
    <table>
        <thead>
            <tr>
                <th>
                    <p>
                        Active
                    </p>
                </th>
                <th>
                    <p>
                        Highlight
                    </p>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" name="act01" class="chk-active" />
                </td>
                <td>
                    <input type="checkbox" name="hig01" class="chk-highlight" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="act02" class="chk-active" />
                </td>
                <td>
                    <input type="checkbox" name="hig02" class="chk-highlight" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="act03" class="chk-active" />
                </td>
                <td>
                    <input type="checkbox" name="hig03" class="chk-highlight" />
                </td>
            </tr>
        </tbody>
    </table>
</div>

次のような jQuery を使用できます。

脚本

<script type="text/javascript">
    $(function() {
        //  This will file through all "active" type checkboxes
        $("#ActHigh .chk-active").each(function(i){ //  Keep in mind, this refernce relys on active and highlight chkboxes being one right after the other in html
            $(this).change(function(e) {//  this tells us to do something on the current checkbox when it is checked, via mouse or keyboard
                //  this looks for the "highlight" checkbox with the same INDEX as the currently changed "active" checkbox
                $("#ActHigh .chk-highlight").filter(function(ii){ return ii == i; }).prop("checked", $(this).prop("checked"));  
            });
        });
    })
</script>
于 2012-09-26T21:41:43.233 に答える