AnthonyGalli.com
AnthonyGalli.com

Reputation: 2866

collection_check_boxes = collection_check_boxes

If a user checks or unchecks a :committed day how can we automatically match send_email's collection_check_boxes to whatever is presently checked or unchecked in :committed collection_check_boxes?

For example if a user checks "sun" and unchecks "fri" in committed then those changes would also be reflected in :send_email.

enter image description here

But not vice versa.

For example if a user changes the checked days of send_email then no javascript should take effect. :committed should only change upon direct contact.

enter image description here

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

Thanks javascript friends!

Upvotes: 0

Views: 422

Answers (1)

codyeatworld
codyeatworld

Reputation: 1283

Assuming each collection of checkboxes will have the same value (Monday and Monday), you could group each collection of checkboxes in a 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>

Only listen for clicks from the .committed-check-boxes div. Find the matching checkbox from .send-email-check-boxes and use prop to set checked to true/false.

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

Upvotes: 1

Related Questions