collection_check_boxes = collection_check_boxes

Question

如果用戶選中或取消選中一個:committed一天，我們如何能夠自動匹配send_email的collection_check_boxes到任何在:committedcollection_check_boxes目前選中或取消選中？

例如，如果用戶選中「太陽」並取消選中committed中的「星期五」，那麼這些更改也會反映在:send_email中。

而不是相反。

例如，如果一個用戶改變send_email檢查的日子則沒有JavaScript的應該生效。 :committed只應在直接接觸而改變。

<%= f.collection_check_boxes :committed, Date::ABBR_DAYNAMES, :downcase, :to_s, checked: ["mon", "tue", "wed", "thu", "fri"] %> 

<%= f.collection_check_boxes :send_email, Date::ABBR_DAYNAMES, :downcase, :to_s, checked: ["mon", "tue", "wed", "thu", "fri"] %> 

<script> 
</script> 

由於JavaScript的朋友！

Answer 1

假設複選框的每個集合將具有相同的值（星期一及星期一），你可以組複選框的每一組中的一個div。

<div class="committed-check-boxes"> 
    <%= f.collection_check_boxes :committed, Date::ABBR_DAYNAMES, :downcase, :to_s, checked: ["mon", "tue", "wed", "thu", "fri"] %> 
</div> 

<div class="send-email-check-boxes"> 
    <%= f.collection_check_boxes :send_email, Date::ABBR_DAYNAMES, :downcase, :to_s, checked: ["mon", "tue", "wed", "thu", "fri"] %> 
</div> 

只聽從.committed-check-boxes DIV點擊。從.send-email-check-boxes找到匹配的複選框，並使用prop來設置檢查真/假。

<script> 
    $('.committed-check-boxes input[type="checkbox"]').on('click', function() { 
    var checkbox = $(this); 

    $('.send-email-check-boxes') 
     .find('input[value="' + checkbox.val() + '"]') 
     .prop('checked', checkbox.prop('checked')); 
    }); 
</script>