使用jQuery基于日期控制复选框显示 仅保留当前或最近未来日期选项

完整实现代码 #

$(function() {
  // 归一化今日日期为当天0点，消除时分秒对日期比对的影响
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  const validOptions = [];

  // 遍历所有复选框，筛选出日期不早于今日的选项
  $('[data-fieldlabel="Date and Price"] span').each(function() {
    const labelText = $(this).find('.check-box-label').text();
    const dateStr = labelText.split(' - ')[0];
    const optionDate = new Date(dateStr);
    optionDate.setHours(0, 0, 0, 0);

    if (optionDate >= today) {
      validOptions.push({
        el: $(this),
        timestamp: optionDate.getTime()
      });
    }
  });

  // 先隐藏所有选项
  $('[data-fieldlabel="Date and Price"] span').hide();

  // 存在有效选项时，仅展示日期最近的那一个
  if (validOptions.length) {
    validOptions.sort((a, b) => a.timestamp - b.timestamp);
    validOptions[0].el.show();
  }
});

配套HTML示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="checkbox-group" data-fieldlabel="Date and Price">
  <span class="checkbox custom-checkbox custom-check-box">
    <input id="field_13646002_25035125" type="checkbox"/>
    <label class="check-box-label" for="field_13646002_25035125">10/9/21 - 8.50</label>
  </span>
  <span class="checkbox custom-checkbox custom-check-box">
    <input id="field_13646002_25035126" type="checkbox"/>
    <label class="check-box-label" for="field_13646002_25035126">10/16/21 - 2.00</label>
  </span>
  <span class="checkbox custom-checkbox custom-check-box">
    <input id="field_13646002_25035127" type="checkbox"/>
    <label class="check-box-label" for="field_13646002_25035127">10/28/21 - 3.00</label>
  </span>
</div>

逻辑说明 #

• 先将今日日期归一到当天0点，避免时分秒差异导致日期比对出错
• 遍历所有复选框提取日期，过滤掉所有早于今日的选项
• 对符合要求的选项按时间戳升序排序，第一个就是最近的有效日期：如果存在今日选项就取今日，不存在就取最近的未来日期
• 隐藏所有选项后仅展示最近有效日期对应的复选框

内容的提问来源于stack exchange，提问作者saj sta