skip to Main Content

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>

2

Answers


  1. You can use jQuery to achieve this.

    1. First select all the checkboxes except the checked one.
    2. 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>
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search