CSS make li display none when it doesn't contain checked checkbox - Woocommerce

netdev
March 31, 2021
138 views
0 votes
2 Answers

I have a ul with 3 li‘s each one contains a checkbox and a its label (Woocommerce shipping methods). How I can set display:none the li‘s without the checked checkbox?
Here is the html where in the specific example I want to hide everything than free_shipping li:

<ul id="shipping_method" class="woocommerce-shipping-methods">
    <li style="
">
        <div class="porto-radio ">
            <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate8" value="flat_rate:8" class="shipping_method porto-control-input">
                <label class="porto-control-label text-capitalize font-weight-normal" for="shipping_method_0_flat_rate8">Flat rate 5: 
                    <span class="woocommerce-Price-amount amount">
                        <bdi>
                            <span class="woocommerce-Price-currencySymbol">€</span>5,00
                        </bdi>
                    </span>
                </label>
            </div>
        </li>
        <li>
            <div class="porto-radio ">
                <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate9" value="flat_rate:9" class="shipping_method porto-control-input">
                    <label class="porto-control-label text-capitalize font-weight-normal" for="shipping_method_0_flat_rate9">Flat rate 10: 
                        <span class="woocommerce-Price-amount amount">
                            <bdi>
                                <span class="woocommerce-Price-currencySymbol">€</span>10,00
                            </bdi>
                        </span>
                    </label>
                </div>
            </li>
            <li>
                <div class="porto-radio ">
                    <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_free_shipping10" value="free_shipping:10" class="shipping_method porto-control-input" checked="checked">
                        <label class="porto-control-label text-capitalize font-weight-normal" for="shipping_method_0_free_shipping10">Free shipping</label>
                    </div>
                </li>
            </ul>

Answers

You can use jQuery to achieve this.

First select all the checkboxes except the checked one.
Then get the parent li and add CSS to it.

$("document").ready(function() {
  var $uncheckedLi = $("ul li input:not([checked])").parents("li");
  $uncheckedLi.css("display", "none");
});

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


<ul id="shipping_method" class="woocommerce-shipping-methods">

  <li>
    <div class="porto-radio">
      <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate8" value="flat_rate:8" class="shipping_method porto-control-input">
      <label class="porto-control-label text-capitalize font-weight-normal" for="shipping_method_0_flat_rate8">
        Flat rate 5:
        <span class="woocommerce-Price-amount amount">
          <bdi><span class="woocommerce-Price-currencySymbol">€</span>5,00</bdi>
        </span>
      </label>
    </div>
  </li>


  <li>
    <div class="porto-radio ">
      <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate9" value="flat_rate:9" class="shipping_method porto-control-input">
      <label class="porto-control-label text-capitalize font-weight-normal" for="shipping_method_0_flat_rate9">
          Flat rate 10: 
          <span class="woocommerce-Price-amount amount">
              <bdi><span class="woocommerce-Price-currencySymbol">€</span>10,00</bdi>
          </span>
      </label>
    </div>
  </li>


  <li>
    <div class="porto-radio ">
      <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_free_shipping10" value="free_shipping:10" class="shipping_method porto-control-input" checked="checked">
      <label class="porto-control-label text-capitalize font-weight-normal" for="shipping_method_0_free_shipping10">Free shipping</label>
    </div>
  </li>


</ul>

You can use filter to all radio inside li and hide if is not checked.

$('li input[type="radio"]').filter(function() {
  return !$(this).is(":checked");
}).closest('li').hide();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="shipping_method" class="woocommerce-shipping-methods">
    <li style="">
        <div class="porto-radio ">
            <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate8" value="flat_rate:8" class="shipping_method porto-control-input">
            <label class="porto-control-label text-capitalize font-weight-normal" for="shipping_method_0_flat_rate8">Flat rate 5: 
                <span class="woocommerce-Price-amount amount">
                    <bdi>
                        <span class="woocommerce-Price-currencySymbol">€</span>5,00
                    </bdi>
                </span>
            </label>
        </div>
    </li>
    <li>
        <div class="porto-radio ">
            <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate9" value="flat_rate:9" class="shipping_method porto-control-input">
            <label class="porto-control-label text-capitalize font-weight-normal" for="shipping_method_0_flat_rate9">Flat rate 10: 
                <span class="woocommerce-Price-amount amount">
                    <bdi>
                        <span class="woocommerce-Price-currencySymbol">€</span>10,00
                    </bdi>
                </span>
            </label>
        </div>
    </li>
    <li>
        <div class="porto-radio ">
            <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_free_shipping10" value="free_shipping:10" class="shipping_method porto-control-input" checked="checked">
            <label class="porto-control-label text-capitalize font-weight-normal" for="shipping_method_0_free_shipping10">Free shipping</label>
        </div>
    </li>
</ul>

Please signup or login to give your own answer.

Click here to cancel reply.

CSS make li display none when it doesn't contain checked checkbox – Woocommerce

Answers