How to hide others checkboxes in another block created in ACF when one checkbox is selected?

Question

I'm having difficulty trying to get a function to work. I created a block in ACF with a checkbox to run a function when a post is being saved. What I'm trying to do is hide other checkboxes when one checkbox is selected. For example, if I added a block, select that checkbox in the block and then add another block, the checkbox in the other block should be hidden.

Here's an example of my code. The check boxes show up when you click on the blue box:

$(document).on( "click", '#one_image_set_thumbnail', function() {
        $(".acf-field-602d961d31e16").css({'height':'inherit','overflow':'inherit','border-top':'0','padding':'0 0 19.5px'});
});
    $(document).on("click", "#one_image_set_thumbnail,#one_image_feature_image input", function () {
        if ($("#one_image_feature_image input").is(":checked")) {
            $("#one_image_feature_image label").css("display", "none");
            $("#one_image_feature_image .acf-label").text("Thumbnail has been selected");
        } else {
            $("#one_image_feature_image label").css("display", "block");
            $("#one_image_feature_image .acf-label").text("");
        };
    });

#one_image_set_thumbnail {width:120px;height:30.5px;border-color: #007cba;
background: #008dd4;border-radius: 3px;margin-bottom:10px}
#one_image_feature_image {height:0;overflow:hidden}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one_image_set_thumbnail">
</div>
<div id="one_image_feature_image" class="acf-field-602d961d31e16">
  <div class="acf-label"></div>
  <div class="acf-input">
    <label>
  <input type="checkbox" id="acf-block_603630f96e87b-field_602d961d31e16-one_img_set_feat_img" name="acf-block_603630f96e87b[field_602d961d31e16][]" value="one_img_set_feat_img">Set featured image
    </label>
  </div>
</div>
<div id="one_image_set_thumbnail">
</div>
<div id="one_image_feature_image" class="acf-field-602d961d31e16">
  <div class="acf-label"></div>
  <div class="acf-input">
    <label>
  <input type="checkbox" id="acf-block_603631086e87c-field_602d961d31e16-one_img_set_feat_img" name="acf-block_603631086e87c[field_602d961d31e16][]" value="one_img_set_feat_img">Set featured image
    </label>
  </div>
</div>

Answer 1

1.When you are trying to perform an event on a bunch of html element then use class to do it. id used as a unique identifier to perform an event only on one html throughout the page.

2.Simplify your code like below:

$(document).on( "click", '.one_image_set_thumbnail', function() {
  $(this).next('.one_image_feature_image').css({
    'height':'inherit',
    'overflow':'inherit',
    'border-top':'0',
    'padding':'0 0 19.5px'
  });
});

$(document).on("click","input[type=checkbox]",function(){
  $('.acf-input').hide();
  $('.one_image_feature_image').find('.acf-label').text("");
  if($(this).is(":checked")){
    $(this).closest('.acf-input').show();
    $(this).closest('.one_image_feature_image').find('.acf-label').text("Thumbnail has been selected");
  }
  
});

Working snippet:

$(document).on( "click", '.one_image_set_thumbnail', function() {
  $(this).next('.one_image_feature_image').css({
    'height':'inherit',
    'overflow':'inherit',
    'border-top':'0',
    'padding':'0 0 19.5px'
  });
});

$(document).on("click","input[type=checkbox]",function(){
  $('.acf-input').hide();
  $('.one_image_feature_image').find('.acf-label').text("");
  if($(this).is(":checked")){
    $(this).closest('.acf-input').show();
    $(this).closest('.one_image_feature_image').find('.acf-label').text("Thumbnail has been selected");
  }
});

/*instead of # use . now*/
.one_image_set_thumbnail {
  width:120px;
  height:30.5px;
  border-color: #007cba;
  background: #008dd4;
  border-radius: 3px;
  margin-bottom:10px
}
/*instead of # use . now*/
.one_image_feature_image {
  height:0;
  overflow:hidden
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- use class -->
<div class="one_image_set_thumbnail"></div>
<div class="one_image_feature_image acf-field-602d961d31e16"><!-- use class -->
  <div class="acf-label"></div>
  <div class="acf-input">
    <label>
      <input type="checkbox" id="acf-block_603630f96e87b-field_602d961d31e16-one_img_set_feat_img" name="acf-block_603630f96e87b[field_602d961d31e16][]" value="one_img_set_feat_img">Set featured image
    </label>
  </div>
</div>
<!-- use class -->
<div class="one_image_set_thumbnail"></div>
<div class="one_image_feature_image acf-field-602d961d31e16"><!-- use class -->
  <div class="acf-label"></div>
  <div class="acf-input">
    <label>
  <input type="checkbox" id="acf-block_603631086e87c-field_602d961d31e16-one_img_set_feat_img" name="acf-block_603631086e87c[field_602d961d31e16][]" value="one_img_set_feat_img">Set featured image
    </label>
  </div>
</div>

Note:- check HTML comment <!-- use class --> where I suggested you to add class, as well as check CSS modifications too