How to hide a checkbox that\'s in a fexible content box but not hide others

• openbayou

• February 3, 2021 at 7:41 am

I’m using a flexible content on my block to add images to a post. In that flexible content, I have a checkbox to make that image a feature image. I’m wondering if there a way so that if a checkbox is selected in the first flexible content, it hides the checkbox in the rest. The problem is that they all have the same class (.acf-field-5f8cf27f39a66) and ID (#three_img_plus_feature_img) so when you hide that checkbox, it hides all of them. Any solution on how to solve this problem. Thanks.

Code I have so far:

$(document).on("click", "#three_img_plus_feature_img input", function () {
    if ($("#three_img_plus_feature_img input").is(":checked")) {
        $("#three_img_plus_feature_img label").css("display", "none");
    } else {
        $("#three_img_plus_feature_img label").css("display", "block");
    }
});

The HTML looks like this:

<div id="three_img_plus_feature_img" class="acf-field acf-field-checkbox acf-field-5f8cf27f39a66" data-name="three_img_plus_feature_img" data-type="checkbox" data-key="field_5f8cf27f39a66" data-conditions="[[{&quot;field&quot;:&quot;field_5f8cf27f39951&quot;,&quot;operator&quot;:&quot;!=empty&quot;}]]">
      <div class="acf-label"></div>
      <div class="acf-input">
          <input type="hidden" name="acf-block_6019b745d990c[field_5f8cf27e7c782 [6019b7a4d990e][field_5f8cf27f39a66]">
          <ul class="acf-checkbox-list acf-bl">
              <li><label class=""><input type="checkbox" id="acf-block_6019b745d990c-field_5f8cf27e7c782-6019b7a4d990e-field_5f8cf27f39a66-three_img_plus_set_feature_img" name="acf-block_6019b745d990c[field_5f8cf27e7c782][6019b7a4d990e][field_5f8cf27f39a66][]" value="three_img_plus_set_feature_img"> Set featured image</label></li>
          </ul>
      </div>
</div>

• openbayou

• February 4, 2021 at 2:36 pm

This is what I’ve done so far. What this does is it adds the class .current to the selected checkbox and hide the rest. The problem I have now is that when you uncheck the box, the class .current is still there and when you check on another checkbox, it doesn’t work at all.

$(document).on("click", "#three_img_plus_feature_img input", function () {
    $("#three_img_plus_feature_img").removeClass('current');
    $(this).closest("#three_img_plus_feature_img").addClass('current');

    if ($(this).is(":checked")) {
        $("#three_img_plus_feature_img:not(.current) label").css("display", "none");
    } else {
        $("#three_img_plus_feature_img:not(.current) label").css("display", "block");
    }
});

• John Huebner

• March 13, 2021 at 6:06 am

See my example here for turning a checkbox in a repeater into a radio field. Your conditions may be different but the basic idea should be there. https://github.com/Hube2/acf-dynamic-ajax-select-example/tree/master/unique-repeater-checkbox