如何隐藏 ACF 中灵活内容框中的复选框但不隐藏其他复选框

Posted 2023-05-09

【中文标题】如何隐藏 ACF 中灵活内容框中的复选框但不隐藏其他复选框

【英文标题】：How to hide a checkbox that's in a fexible content box in ACF but not hide others

【发布时间】：2021-05-08 05:40:50

【问题描述】：

我正在使用我的块上的灵活内容来将图像添加到帖子中。在那个灵活的内容中，我有一个复选框来使该图像成为特征图像。我想知道是否有一种方法，如果在第一个灵活内容中选择了一个复选框，它会隐藏其余的复选框。问题是它们都具有相同的类 (.acf-field-5f8cf27f39a66) 和 ID (#three_img_plus_feature_img)，因此当您隐藏该复选框时，它会隐藏所有这些复选框。有关如何解决此问题的任何解决方案。谢谢。

到目前为止我的代码：

$(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");
    
);

html 看起来像这样。添加的每个项目都是相同的，所以如果有两个项目，它们看起来都一样。

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

【参考方案1】：

您可以在单击的类上添加一个临时类，用于识别。也许不是最好的方法，但它可以工作：

$(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");
    
);

【讨论】：

这很好，但是当您取消选中它时，它不会删除 .current 类。因此，当您单击复选框时，它会添加 .current 类，但当您取消选中它时，.current 类仍然存在。

.current 不是用来识别被检查的输入，而是用来识别最后点击的输入

感谢您的帮助。我会以此为起点。